Load Vue …
<script src="https://unpkg.com/vue@3"></script>
… add a bit of markup …
<div id="todo">
…
</div>
… and off we go!
const { createApp } = Vue
createApp({
data () {
…
}
}).mount('#todo')
Add the petite-vue script with init
…
<script src="https://unpkg.com/petite-vue" defer init></script>
… create a petite-vue “region” with v-scope
…
<div v-scope="{ count: 0 }">
…
</div>
… then do Vue things:
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">Increment</button>
</div>
HTML
<form id="search">
…
</form>
JS
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
results: [],
async getResults (search) {
…
}
}).mount('#search')
Until JS has loaded, this HTML …
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
… will look like this:
A flash of “un-compiled” content. FOUC FOUCC? 🤔
The solution is …
<ul v-cloak>
<li v-for="item in items">
{{ item }}
</li>
</ul>
… paired with a bit of CSS:
[v-cloak] {
display: none !important;
}
v-cloak
attribute will be removed when petite-vue is ready.