diff --git a/docs/content/1.getting-started/2.nuxt.md b/docs/content/1.getting-started/2.nuxt.md index d4ac36b3..2f62f7da 100644 --- 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 index 8b14a5f3..00bb2439 100644 --- 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 index bf27f64d..2684933b 100755 --- 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) } )