How to use <component :is=""> in vue 3 script setup

Question

I am using the experimental script setup to create a learn enviroment. I got a selfmade navigation bar with open a single component.

I am having trouble using the <component :is="" /> method. This method is described in the docs under component basics -> dynamic-components

In the Vue 3 Composition API, it works as expected:

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script>
import { ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'

export default {
  components: {
    NavigationBar,
    TemplateSyntax,
    DataPropsAndMethods
  },
  setup () {
    const tab = ref('DataPropsAndMethods')
    function changeTab (newTab) {
      tab.value = newTab
    }

    return {
      changeTab,
      tab
    }
  }
}
</script>

My approach with the script setup fails:

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="tab" />
</template>

<script setup>
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref } from 'vue'

const tab = ref('DataPropsAndMethods')
function changeTab (newTab) {
  tab.value = newTab
}
</script>

do you got any idea how to solve this with the script setup method?

import {defineAsyncComponent} from "vue" <component :is="defineAsyncComponent(()=>import(../components/${yourComponent}))"></component> — Михаил
– Михаил, Commented Jul 3, 2023 at 15:18

tony19 · Accepted Answer · 2021-03-30 02:28:30Z

It seems with <script setup>, tab needs to reference the component definition itself instead of the component name.

To reference the component definition, which does not need reactivity, use markRaw() before setting tab.value:

<script setup>
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref, markRaw } from 'vue'

const tab = ref(null)

changeTab(DataPropsAndMethods)

// newTab: component definition (not a string)
function changeTab (newTab) {
  tab.value = markRaw(newTab)
}
</script>

demo 1

If you need to pass the component name to changeTab(), you could use a lookup:

<script setup>
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref, markRaw } from 'vue'

const tab = ref(null)

changeTab('DataPropsAndMethods')

// newTab: component name (string)
function changeTab (newTab) {
  const lookup = {
    DataPropsAndMethods,
    /* ...other component definitions */
  }
  tab.value = markRaw(lookup[newTab])
}
</script>

demo 2

Tested with Vue 3.0.9 setup with Vue CLI 5.0.0-alpha.8

Mohammadreza Khalilikhorram · Accepted Answer · 2024-06-04 21:10:18Z

3

My approach :

<template>
  <NavigationBar
    @switchTab="changeTab"
    :activeTab="tab"
  />
  <component :is="activeTab" />
</template>

<script setup lang="ts">
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref , computed} from 'vue'


const tab = ref('DataPropsAndMethods')
const activeTab=computed(()=>({
    NavigationBar,
    TemplateSyntax,
    DataPropsAndMethods
}[tab.value]))


function changeTab (newTab) {
  tab.value = newTab
}
</script>

answered Jun 4, 2024 at 21:10

Mohammadreza Khalilikhorram

5454 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to use <component :is=""> in vue 3 script setup

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related