Tried to get it to work in Vite SSR

[mellester]

Not sure if I just did not understand the configuration of Vite, Or this package simply cant be run in SSR

[HJ29]

sorry for late reply. i leave this answer here in case people tried to use this package in SSR project.

---

yes, this package doesn't support SSR. if u see error like document is not defined, that means this package tried to use document in server side but document doesn't exist in server side.

however, i can make server side ignore this package, but client side not ignore it, by using

1. import.meta.env.SSR to detect SSR env
2. defineAsyncComponent to do conditional import

then, make it only import this package when it is in SSR env

<template>
  <div v-if="!isSSR">
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels> 
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'App',
  components: {
    Tabs: defineAsyncComponent((async () => (await import('vue3-tabs')).Tabs)),
    Tab: defineAsyncComponent(async () => (await import('vue3-tabs')).Tab),
    TabPanels: defineAsyncComponent(async () => (await import('vue3-tabs')).TabPanels),
    TabPanel: defineAsyncComponent(async () => (await import('vue3-tabs')).TabPanel),
  },
  setup() {
    const state = reactive({
      selectedTab: 'A',
      tabs:  ['A', 'B', 'C'],
      isSSR: import.meta.env.SSR
    });
    return {
      ...toRefs(state)
    };
  }
})
</script>

i setup vite vue3 ssr by following this example and documentation.

and you have to install vue3-tabs@v0.1.10, it fixed some bug.