petite vue as a widget?

[ricky11]

Im currently using vue.js [OG 2.x] as a widget and using webpack to bundle in to a single js, then mounting on window div.

it works, but downloading 30kb is quite a lot for a widget.

now here comes petite-vue! but can i take it a step further and use petite-vue in a cloud function, and response with the template as a html file? will the client side still be reactive? or must i ship vue as well?

[niutech]

Sure, you can make a widget with Petite Vue! Just let your cloud function respond with this HTML:

<script src="https://unpkg.com/petite-vue" defer init></script><div v-scope="{count: 0}">{{count}} <button @click="count++">increment</button></div>

[ricky11]

could i take it one step further and bundle petite-vue, for a one page spa?
and can i use a .vue template?

[niutech]

For a SPA I would recommend the full Vue.js, because Petite Vue does not support .vue single file components.

[jlovas]

You can create a SPA application, but you don't need a bundler. Petite-vue has no component architecture (.vue). It should be used in the same way as e.g. jquery.

(You can make petite-vue components, even quite complex ones, but Vue JS is just that. No need to write a new Vue JS on a petite-vue basis.)

[ricky11]

Thank you, yes i am using full vue in my multipage route app, but i have a single route app which is quite simple, but i have other npm modules such as date-fns, axios , etc, and would like to include petite-vue.. the docs dont mention how to import petite-vue as a module, i guess it is possible , currently i am doing it as const {createApp, nextTick, reactive } = require('petite-vue') rather then importing from cdn. Then webpack bundles the app.

I am getting some issues though, there is a flash of the index.html raw before the js kicks in, anyway to prevent the flash, v-cloak does not seem to work.

[niutech]

Of course it is possible to npm install petite-vue and import { createApp } from 'petite-vue' in your JS module. As for v-cloak, you need to put it inside v-scope and add CSS: [v-cloak] { display: none; }