Vue <script setup> - how to deal with multiple dynamic components?

Question

It seems that it is impossible to convert the Options API code below to <script setup>:

    <template>
      <div>
        <component :is="layout">
          <router-view/>
        </component>
      </div>
    </template>
    
    <script>
    const defaultLayout = 'default'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    export default {
      name: 'App',
    
      components: {
        Dark,
        Light,
        Default
      },
    
      computed: {
        layout () {
          return (this.$route.meta.layout || defaultLayout)
        }
      }
    }
    </script>

My attempt:

    <script setup>
    import { computed } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    const router = useRouter()
    const route = useRoute()
    
    const defaultLayout = 'default'
    const layout = computed(() => route.meta.layout || defaultLayout )
    </script>

Result:

No layout is loaded with the <script setup> option but just a <default>, <dark>, or <light> block, for example:

    <div id="app">
    <default>
    ...
    ...
    </default>
    </div>

According to the doc here, we can use a ternary:

    <component :is="someCondition ? Foo : Bar" />

But that is not ideal. As you might have more than 2 dynamic components to work out. We can't make the ternary too long. Can we?

Any ideas?

I got a similar question about to use component :is="" with script setup. Hope it will help you — wittgenstein
– wittgenstein, Commented Sep 18, 2021 at 20:36

Michal Levý · Accepted Answer · 2021-09-19 11:07:57Z

14

The trick is to return the referenced variable rather than it's name.

    <script setup>
    import { computed } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    
    import Dark from './layouts/dark.vue'
    import Light from './layouts/light.vue'
    import Default from './layouts/default.vue'
    
    const router = useRouter()
    const route = useRoute()
    
    const layouts = {
      default: Default,
      light: Light,
      dark: Dark
    };
    
    const defaultLayout = 'default'
    const layout = computed(() => layouts[route.meta.layout || defaultLayout] )
    </script>

Reason

While with options API components are registered locally and can be resolved by it's name (string key), with <script setup> the components are used directly without registration so it is not possible to use string key to resolve them...

edited Sep 19, 2021 at 11:07

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

answered Sep 19, 2021 at 4:00

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pieter Steyn Over a year ago

As per the vue's documentation, you can use the name string of a component and vue will resolve that component as long as it is registered in that component. And as per vue's documentation a component is registered when importing that component when using script setup. No mention of not being able to use the string name in script setup.

Collectives™ on Stack Overflow

Vue <script setup> - how to deal with multiple dynamic components?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related