fix: custom directives in Nuxt (#131) (#132)

vueuse · Jun 21, 2023 · bf1af3f · bf1af3f
1 parent bb30944
commit bf1af3f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/docs/content/1.getting-started/2.nuxt.md b/docs/content/1.getting-started/2.nuxt.md
@@ -22,19 +22,23 @@ Then, configure your animations 🤹:
 ```javascript
 {
   // nuxt.config.js
-  motion: {
-    directives: {
-      'pop-bottom': {
-        initial: {
-          scale: 0,
-          opacity: 0,
-          y: 100
-        },
-        visible: {
-          scale: 1,
-          opacity: 1,
-          y: 0
-        },
+  runtimeConfig: {
+    public: {
+      motion: {
+        directives: {
+          'pop-bottom': {
+            initial: {
+              scale: 0,
+              opacity: 0,
+              y: 100,
+            },
+            visible: {
+              scale: 1,
+              opacity: 1,
+              y: 0,
+            }
+          }
+        }
       }
     }
   }

diff --git a/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
@@ -21,18 +21,22 @@ export default defineNuxtConfig({
       },
     ],
   },
-  motion: {
-    directives: {
-      'slide-rotate-top': {
-        initial: {
-          y: -400,
-          opacity: 0,
-          rotate: 90,
-        },
-        enter: {
-          y: 0,
-          opacity: 1,
-          rotate: 0,
+  runtimeConfig: {
+    public: {
+      motion: {
+        directives: {
+          'pop-bottom': {
+            initial: {
+              scale: 0,
+              opacity: 0,
+              y: 100,
+            },
+            visible: {
+              scale: 1,
+              opacity: 1,
+              y: 0,
+            },
+          },
         },
       },
     },

diff --git a/src/nuxt/runtime/templates/motion.ts b/src/nuxt/runtime/templates/motion.ts
@@ -3,8 +3,8 @@ import { defineNuxtPlugin, useRuntimeConfig } from '#app'
 
 export default defineNuxtPlugin(
   (nuxtApp) => {
-    const { motion: options } = useRuntimeConfig()
-
-    nuxtApp.vueApp.use(MotionPlugin, options)
+    const config = useRuntimeConfig()
+    
+    nuxtApp.vueApp.use(MotionPlugin, config.public.motion)
   }
 )