I recently saw this Vue.js
snippet by Evan You on Twitter, and I don’t understand what the init
attribute in the script tag does. I could not find anything about this on MDN or similar sites.
The defer
attribute is clear to me.
JavaScript
x
8
1
<script src="https://unpkg.com/petite-vue" defer init></script>
2
3
<!-- anywhere on the page -->
4
<div v-scope="{ count: 0 }">
5
{{ count }}
6
<button @click="count++">inc</button>
7
</div>
8
Advertisement
Answer
It’s explained in the repo Readme file in the Usage section :
The
init
attribute tellspetite-vue
to automatically query and initialize all elements that havev-scope
on the page.
and according to this code snippet it’s a custom attribute and it’s used to mount the app if the script tag is present :
JavaScript
1
5
1
let s
2
if ((s = document.currentScript) && s.hasAttribute('init')) {
3
createApp().mount()
4
}
5