Nuxt 3 module: Custom directive not working - using example from docs

[PatrikBird]

Hello there,

thanks for creating such an amazing library! I love it ❤️.

I'm not able to create custom directives in Nuxt using the example mentioned in the docs:

{
  // nuxt.config.js
  motion: {
    directives: {
      'pop-bottom': {
        initial: {
          scale: 0,
          opacity: 0,
          y: 100
        },
        visible: {
          scale: 1,
          opacity: 1,
          y: 0
        },
      }
    }
  }
}

When I try to use the custom directive like:

<p v-motion-bottom-pop>I am supposed to be animated by a custom directive using @vueuse/motion!</p>

I get the following error:
[Vue warn]: Failed to resolve directive: motion-bottom-pop

Using presets works without any issue.
I recreated the issue here: https://stackblitz.com/edit/nuxt-starter-7pqo1q?file=app.vue

Nuxt: 3.5.2
Vueuse/motion: 2.0

[cjboy76]

@PatrikBird
The directive you defined in nuxt.config.js is pop-bottom, but you use <p v-motion-bottom-pop> instead.
Also I create a PR for exposing config to clients, it should fix the issue.

[PatrikBird]

Oh okay sorry. I messed the repro... it's corrected now and I can't get it working either.. same error.
Am I doing something wrong?

I declared this:

motion: {
  directives: {
    'pop-bottom': {
...

I use it like this:

<div v-motion-pop-bottom>

And get this: [Vue warn]: Failed to resolve directive: motion-pop-bottom (local env and stackblitz).
Again, the presets work.

Appreciate your quick response!

[jetlej]

This also doesn't work for me. Same exact example code from above.

No animation is triggered whatsoever

[PatrikBird]

It looks hardly maintained. The fix never got released