fix: teleport ssr issue

unovue · Aug 22, 2023 · 54e0eac · 54e0eac
1 parent a943661
commit 54e0eac
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 167 deletions.
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
     "@commitlint/config-conventional": "^17.7.0",
     "eslint": "^8.43.0",
     "lint-staged": "^14.0.0",
-    "simple-git-hooks": "^2.9.0",
-    "pnpm": "^8.6.12"
+    "pnpm": "^8.6.12",
+    "simple-git-hooks": "^2.9.0"
   },
   "commitlint": {
     "extends": [

diff --git a/packages/radix-nuxt/src/index.ts b/packages/radix-nuxt/src/index.ts
@@ -1,7 +1,7 @@
-import { addComponent, defineNuxtModule } from '@nuxt/kit'
+import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
 import type { } from '@nuxt/schema' // workaround for TS bug with "phantom" deps
-import * as components from 'radix-vue'
+import * as components from '../../radix-vue'
 
 export default defineNuxtModule({
   meta: {
@@ -20,4 +20,4 @@ export default defineNuxtModule({
       })
     }
   },
-})
+})
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -7,6 +7,7 @@ import { Presence } from '@/Presence'
 import { type PointerDownOutsideEvent } from '@/DismissableLayer'
 import NavigationMenuContentImpl, { type NavigationMenuContentImplEmits, type NavigationMenuContentImplProps } from './NavigationMenuContentImpl.vue'
 import { useEmitAsProps } from '@/shared'
+import { useMounted } from '@vueuse/core'
 
 export interface NavigationMenuContentProps extends NavigationMenuContentImplProps {}
 export type NavigationMenuContentEmits = NavigationMenuContentImplEmits
@@ -16,6 +17,7 @@ const emits = defineEmits<NavigationMenuContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
 
+const isClientMounted = useMounted()
 const context = inject(NAVIGATION_MENU_INJECTION_KEY)
 const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
 
@@ -43,7 +45,7 @@ export default {
 </script>
 
 <template>
-  <Teleport :to="context?.viewport.value" :disabled="!context?.viewport.value">
+  <Teleport v-if="isClientMounted" :to="context?.viewport.value" :disabled="!context?.viewport.value">
     <Presence :present="open || isLastActiveValue">
       <NavigationMenuContentImpl
         :data-state="getOpenState(open)"

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -183,10 +183,6 @@ function handleDismiss() {
   })
   currentElement.value?.dispatchEvent(rootContentDismissEvent)
 }
-
-defineExpose({
-  ...props,
-})
 </script>
 
 <template>
@@ -197,7 +193,7 @@ defineExpose({
     :data-motion="motionAttribute"
     :data-state="getOpenState(context?.modelValue.value === itemContext!.value)"
     :data-orientation="context?.orientation"
-    :disable-outside-pointer-events="disableOutsidePointerEvents"
+    v-bind="props"
     @keydown="handleKeydown"
     @escape-key-down="handleEscapeKeyDown"
     @pointer-down-outside="handlePointerDownOutside"

diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
@@ -5,88 +5,9 @@ import Card from './components/Card.vue'
 <template>
   <div class="w-full flex flex-col items-center">
     <div class="max-w-6xl w-full grid grid-cols-3 gap-4 pt-40 pb-40">
-      <Card>
-        <AccordionDemo />
-      </Card>
-      <Card>
-        <AlertDialogDemo />
-      </Card>
-      <Card>
-        <AspectRatioDemo />
-      </Card>
       <Card class="col-span-2">
         <NavigationMenuDemo />
       </Card>
-      <Card>
-        <CollapsibleDemo />
-      </Card>
-      <Card>
-        <AvatarDemo />
-      </Card>
-      <Card>
-        <CheckboxDemo />
-      </Card>
-      <Card>
-        <ScrollAreaDemo />
-      </Card>
-      <Card class="col-span-2">
-        <ContextMenuDemo />
-      </Card>
-      <Card class="col-span-2">
-        <DialogDemo />
-      </Card>
-      <Card>
-        <DropdownMenuDemo />
-      </Card>
-      <Card>
-        <MenubarDemo />
-      </Card>
-
-      <Card>
-        <HoverCardDemo />
-      </Card>
-      <Card>
-        <LabelDemo />
-      </Card>
-      <Card>
-        <PopoverDemo />
-      </Card>
-      <Card>
-        <ProgressDemo />
-      </Card>
-      <Card>
-        <RadioGroupDemo />
-      </Card>
-      <Card>
-        <SelectDemo />
-      </Card>
-      <Card>
-        <SelectMultipleDemo />
-      </Card>
-      <Card>
-        <SeparatorDemo />
-      </Card>
-      <Card>
-        <SliderDemo />
-      </Card>
-      <Card>
-        <SwitchDemo />
-      </Card>
-      <Card>
-        <TabsDemo />
-      </Card>
-      <Card>
-        <ToggleDemo />
-      </Card>
-      <Card>
-        <ToggleGroupDemo />
-      </Card>
-      <Card class="col-span-2">
-        <ToolbarDemo />
-      </Card>
-      <Card>
-        <TooltipDemo />
-      </Card>
     </div>
   </div>
 </template>

diff --git a/playground/nuxt/package.json b/playground/nuxt/package.json
@@ -9,7 +9,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "radix-vue": "file:../../packages/radix-vue"
+    "radix-vue": "link:../../packages/radix-vue"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",