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.
<script src="https://unpkg.com/petite-vue" defer init></script>
<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">inc</button>
</div>
Advertisement
Answer
It’s explained in the repo Readme file in the Usage section :
The
initattribute tellspetite-vueto automatically query and initialize all elements that havev-scopeon 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 :
let s
if ((s = document.currentScript) && s.hasAttribute('init')) {
createApp().mount()
}