Key architectural concepts when customizing layouts and presets in Katlux.
1. Switching Subcomponents Inside KLayout
If your application or custom preset requires radically different layouts (e.g. Standard, Dashboard with dual panels, and Fullscreen Canvas), you can create subcomponents inside your preset and switch between them dynamically in `KLayout.vue`:
// presets/custom-preset/components/KLayout/KLayout.vue
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from '#app'
import LayoutStandard from './structures/LayoutStandard.vue'
import LayoutDashboard from './structures/LayoutDashboard.vue'
import LayoutCanvas from './structures/LayoutCanvas.vue'
const props = defineProps<{ structure?: string }>()
const route = useRoute()
const activeComponent = computed(() => {
const mode = props.structure || route.meta.layoutStructure
if (mode === 'dashboard') return LayoutDashboard
if (mode === 'canvas') return LayoutCanvas
return LayoutStandard
})
</script>
<template>
<component :is="activeComponent">
<template v-for="(_, slot) in $slots" ="scope">
<slot :name="slot" v-bind="scope" />
</template>
</component>
</template>
2. State Reset Behavior on Structural Preset Swaps
In Vue 3, when a parent component's template is swapped via dynamic `:is="presetComponent"` (as happens when switching presets if a preset overrides a structural container component like `KLayout`, `KPanel`, or `KGrid`), Vue unmounts the previous template instance and mounts the new one.
Why State Resets: Any internal reactive state local to slotted children (such as local `ref()`, active tab indices, or datatable row selections) will naturally reset when the enclosing container component is unmounted and recreated.
State Persistence Strategy: If an application requires component state to survive structural preset changes, that state should be maintained in an external state management store (such as Pinia or Nuxt's useState()) rather than solely within ephemeral local component refs.