Vue directives not working on top-level <template> in SFCs
Vue version
3.2.33 on playcode.io, and latest @036914c in Vue SFC playground
Link to minimal reproduction
https://playcode.io/1386836 or https://sfc.vuejs.org/#eNp1UEFqwzAQ/MpaFydQS/RqHEPppQ8I9KJLGm8Sp5JWSHJCMf57V3YSSml1ELur0czOjOLFe3kZUNSiifvQ+wQR0+Bb7XrrKSQYIeABJjgEslAytHw8vZL1y1wLqXKXqbTQTrs9uZjAxiNsMsGqfENjCN4pmK4o1xnSqEWRtbhJaL3ZJQRuAZrTczuO8/9pahR383RWVFw36o5vxZNY9qnszstzJMdmxgzXt4eoRQ3zJM/mFWsuTin5WCsVD/u89zlKCkfFlQyDS71FidFWH4GuEQMTZ2MAk3YTS97d/hHcYv2yRb43i64lZsSuhhWaNWxayBgyKA0dV1pkqBYcCpP/k8qlSgxqm6KqYHvqI3SEERwluFL4LIoCqmrJ6IG40mA6IGe+Zgz0LvYd1vCblAN9fOagszM+t9B/Bj19A5BIvNk=
Steps to reproduce
- Register a custom directive, whether that be with
app.directive, or just by definingconst vDirectiveName - Have the directive do a
console.logundermountedevent as a test - Add this directive to a component's root
import { createApp } from 'vue';
import App from './App.vue';
console.log('Hello world');
const app = createApp(App);
app.directive('test', {
beforeMount: () => console.log("Test!!!")
});
app.mount('#app');
<script setup></script>
<template v-test> <!-- <==does not work :( -->
<h1>Hello Vue 3</h1>
</template>
What is expected?
It should work and do the console.log in the console, same as if I used the directive in the parent component directly where I'm including it.
What is actually happening?
Nothing. It does not work in a root in SFC, only if I use it on any of children elements, or in parent where I include the component (which is not feasible to include it everywhere and remember to do so...)
System Info
No response
Any additional comments?
I'm not sure if it's a bug or by design, and whether SFC compiler can even handle such scenario...
Yes that does not work because the <template> element is not part of the template, its enclosing the template as part of the SFC file format.
It disappears just like the component's <script> and <style> tags disappear when the .vue file is run through the compiler.