Skip to content
Advertisement

Petite-vue Init attribute in HTML script tag

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 init attribute tells petite-vue to automatically query and initialize all elements that have v-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 :

let s
if ((s = document.currentScript) && s.hasAttribute('init')) {
  createApp().mount()
}
Advertisement