Closed mellester closed 3 years ago
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
import.meta.env.SSR
to detect SSR envdefineAsyncComponent
to do conditional importthen, 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.
Not sure if I just did not understand the configuration of Vite, Or this package simply cant be run in SSR