Is custom directive works in vapor mode?

[mblandr]

I wrote sample custom directive, it works ok in usual app.
But when I switch to Vapor app and vapor component, I got error
Uncaught TypeError: dir is not a function
at withVaporDirectives (vue.js:13515:15)
at _sfc_render (App.vue:16:2)
at callWithErrorHandling (vue.js:2420:17)
at devRender (vue.js:12356:43)
at handleSetupResult (vue.js:12569:3)
at setupComponent (vue.js:12332:9)
at createComponent (vue.js:12308:7)
at mountApp (vue.js:12594:39)
at mount (vue.js:5347:23)
at app.mount (vue.js:12624:17)

it refers to this:

for (const [dir, value, argument, modifiers] of dirs) if (dir) {
const ret = dir(element, value, argument, modifiers);
if (ret) onScopeDispose(ret);
}
Are custom directives doesn't work in vapor mode yet?

[justinbeaty]

Vapor mode directives are written differently: https://github.com/vuejs/core/blob/minor/CHANGELOG.md#feature-compatibility-1 (search for VaporDirective)

[aniruddhaadak80]

Hi @mblandr!

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!