Matt Wilcox

Web Development

Notes Feb 11th 2019

VueJS and Progressive Enhancement

Using VueJS to replace existing functional HTML with an enhanced Vue component, only when JS is available... is a lot easier than I realised.

Being an old-school web developer who mainly builds document-centric style websites, I want to use progressive enhancement all the time; layering enhanced functionality on top of existing functionality - rather than just assuming that every visitor is running the latest browser with fast broadband on a powerful new device, in perfect conditions.

I really struggled trying to understand how to do that with VueJS. The documentation doesn't seem to address this sort of use (not that I could find), and much of it assumes you'll be building Single Page Applications (SPAs) which... just fundamentally don't do this, because they rely on JS to work at all.

How to Progressively Enhance a web page with VueJS components.

Mount the Vue instance to the DOM element you want to replace.

...the mounted element will be replaced with Vue-generated DOM...

So much of the example code and documentation mounts the new Vue instance to an empty div that I didn't realise what Vue actually does... it takes the DOM node you're mounting onto and swaps it out with the Vue component you've written.

Which means that if you want to - for example - offer a user a basic plain HTML text search form which posts off to a serach results page, but provide a replacement enhanced search form with live updates and previews of results to anyone who has JS available and running... you can just wrap the form element in a div, and mount the Vue instance to the wrapping div.

If there's no JS available, people will get the old school form. If JS is available, it will be removed and replaced with the fancy new Vue component.

Simple, when you know.