Nuxt 3 Error with custom directives

[EngineerMonkey404]

System info

• Operating System: Linux
• Node Version: v20.16.0
• Nuxt Version: 3.13.0
• CLI Version: 3.13.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.8.1
• Builder: -
• User Config: compatibilityDate, devtools, modules, runtimeConfig
• Runtime Modules: @vueuse/motion/nuxt@2.2.3
• Build Modules: -

Reproduction

Create new nuxt project, install @vueuse/motion and add it to nuxt modules, then create custom directive runtimeConfig: { public: { motion: { directives: { 'pop-bottom': { initial: { opacity: 0, y: 100 }, enter: { opacity: 1, y: 0, transition: { duration: 400 }, }, } }

then create something like this and you get this

Describe the bug

Cannot use custom animation in Nuxt3 with vueuse/motions directive

Additional context

No response

Logs

No response

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? A link to a stackblitz project or public GitHub repository would be perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)

[hajiskyy]

I've added reproduction here: https://stackblitz.com/edit/nuxt-starter-kuu91v?file=app.vue

Also, the issue happened to me after upgrading to the latest version of nuxt

[hajiskyy]

Issue seems to be happening here https://github.com/vueuse/motion/blob/eb7c01de524be8fef787148ee146aa780dd3692d/src/directive/index.ts#L24

it seems that we are receiving a vue ref object and so the stucturedClone fails. it's possibly because the directive usage of custom presets from nuxt are Refs?

[hajiskyy]

Not sure who to tag here but i have an open PR that potentially fixes this issue here https://github.com/vueuse/motion/pull/221

@Tahul @BobbieGoede

[BobbieGoede]

This should be resolved thanks to @hajiskyy's contribution! You can install a preview release containing the fix like so npm i https://pkg.pr.new/@vueuse/motion@221 until a new full release has been published.