Show Example of Passing Vue Component into Tab Contents

[Greendogo]

I have a different Vue Component for each Tab. How do I pass this into the contents of the tab element? Can I use the tabs object in my script to pass this in instead of putting it explicitly in the element definition?

Below is kind of what I was trying to do. I have two other vue components that I want to insert into each tab:

<template>
  <w-dialog
    title="Settings"
    width="20em"
  >
    <w-tabs :items="tabs" />
    <template #actions>
      <w-button @click="closeDialog">
        Close
      </w-button>
    </template>
  </w-dialog>
</template>

<script lang="ts" setup>
  import ConnectionSettings from './ConnectionSettings.vue';
  import PollingSettings from './PollingSettings.vue';
  const tabs = [
    {title: "Connections", content: ConnectionSettings },
    {title: "Polling", content: PollingSettings }
  ]
  const emit = defineEmits(['close'])
  const closeDialog = () => {
    emit('close')
  }
</script>

[antoniandre]

Hi @Greendogo,

You should use the Vue component tag which allows you to mount dynamic components. https://vuejs.org/api/sfc-script-setup.html#dynamic-components

Something like this:

<template>
  <w-dialog
    title="Settings"
    width="20em"
  >
    <w-tabs :items="tabs">
        <template #item-content="{ item }">
            <component :is="item.component"></component>
        </template>
    </w-tabs>
    <template #actions>
      <w-button @click="closeDialog">
        Close
      </w-button>
    </template>
  </w-dialog>
</template>

<script lang="ts" setup>
  import ConnectionSettings from './ConnectionSettings.vue';
  import PollingSettings from './PollingSettings.vue';
  const tabs = [
    {title: "Connections", component: ConnectionSettings },
    {title: "Polling", component: PollingSettings }
  ]
  const emit = defineEmits(['close'])
  const closeDialog = () => {
    emit('close')
  }
</script>

Hope it helps! :)

[Greendogo]

That worked perfectly, thanks! :)