Converting from Vue 2 to Petite Vue
I have a large number of ex-Glitch sites which were written in Vue 2 in Progressive Enhancement style (drop in JS, no build step). I eventually want to update each of these to use Petite Vue instead, as a better fit for their petite functionality.
I’m moving my significant static Glitch sites to a /pebbles directory of this site.
This post is a note-to-self, and instructions for other humans and LLMs to recreate this process.
To make the conversion, you should first read the Petite Vue Docs, then my Petite Vue Guide.
Specific Advice
Change Import
My case: change references from vue.prod.js to petite-vue.js. Note that I keep these files in /pebbles/lib/, e.g https://stegriff.co.uk/pebbles/lib/petite-vue.js
General case: If using unpkg, reference https://unpkg.com/petite-vue
App wrapper
Replace the syntax var app = new Vue({ ... }) with PetiteVue.createApp({ ... })
Everything from Vue 2’s data, methods, etc. should be promoted to members of the single config object passed to createApp. I.e. every former data item, method, and computed will now be siblings in that object.
Parent Element
On the element that has id="app", keep everything about the element and its type the same (you can even retain the app id though it’s not necessary) but add v-scope @vue:mounted="mounted".
Mounted Handler
“Mounted” is not a special function in Petite Vue, but as we have referenced it by that name above (@vue:mounted="mounted"), we can still use a mounted() function in the createApp object to handle that lifecycle hook.
Service Worker
Update the service worker’s list of paths to cache. Remember that Service Workers can’t cache from parent directories or anything above themselves, so if we’re now referencing a file in a parent/uncle lib directory, we can’t cache that with the sw, so just remove it from the array.
My future idea is to have the local app set a list of files to cache in window namespace (like window.swTargets = ['lib/petite-vue.js', ...]), and have every app load a common sw.js from a parent directory, which then references window.swTargets to set its list to cache.
Implementing localStorage without vue-local-storage
I have a practical, reusable LocalStorage solution for Petite Vue apps that can be found here: An easy localstorage technique
My case: vue-local-storage deps should be removed from the page, the sw.js, and anywhere else they appear. Use the approach from the link above.