How To Use Petite Vue

Petite Vue is a stripped down version of Vue. It is only 6KB in size. It is specifically designed for making HTML pages interactive.

Using Petite Vue via CDN

You can use Petite Vue using CDN like this:

<script src="https://unpkg.com/petite-vue"></script>

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">increment</button>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    count: 0,
    increment() {
      this.count++
    }
  }).mount("#app")
</script>

Using with module bundler like Webpack

First you need to install petite vue. It can be installed using npm

npm i petite-vue

Require petite vue inside your js file

window.PetiteVue = require('petite-vue');

After that it can be used like this

PetiteVue.createApp({
    count: 0,
    increment() {
      this.count++
    }
}).mount("#app")

For more details please visit the GitHub repository.