Dynamic view

The dynamic view component renders a single VNode. Pass it a node — built with h(), captured from a slot, or stored in a ref — and it renders that node in place, swapping to a new one whenever the vnode prop changes. It is useful when the content to render is decided in your script rather than written directly in the template.

Props

vnode: VNode
The VNode to render.

Examples

Basic

Render a VNode created with h().

Preview

Code

<template>
    <FluxDynamicView :vnode="vnode"/>
</template>

<script
    setup
    lang="ts">
    import { FluxDynamicView, FluxSecondaryButton } from '@flux-ui/components';
    import { h } from 'vue';

    const vnode = h(FluxSecondaryButton, {
        label: 'Rendered from a VNode'
    });
</script>

Switching the view

Swap the rendered VNode reactively.

Preview

Code

<template>
    <FluxFlex
        direction="vertical"
        :gap="9">
        <FluxToggle v-model="showPrimary">
            Emphasise the action
        </FluxToggle>

        <FluxDynamicView :vnode="action"/>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxDynamicView, FluxFlex, FluxPrimaryButton, FluxSecondaryButton, FluxToggle } from '@flux-ui/components';
    import { computed, h, ref } from 'vue';

    const showPrimary = ref(true);

    const action = computed(() => showPrimary.value
        ? h(FluxPrimaryButton, {label: 'Save changes'})
        : h(FluxSecondaryButton, {label: 'Save changes'}));
</script>