Quench Vue: Client-side hydration of pre-rendered Vue.js apps
Quench Vue allows server-rendered/static markup to be used as the
template for a Vue.js app. It's great for when you can't/don't want to use "real" server-side rendering.
All of Vue's existing features will work as normal when the app is initialized in the browser.
To understand what's going on in the following pen, the author has written a small summary of steps that would allow the user to utilize Quench Vue. The static markup is used as usual and normal v- attributes can be used where appropriate. For data bindings that need to change on the client-side, you add a data-binding attribute of the Vue data object's name.
For things like loops, you output all the items as static (and in the case of arrays explicitly specify the index in the array), and then you wrap all but the first in
<!-- --> …
<!-- --> comments, which will remove them from the Vue template so the
v-for only happens on the 1 element.
By default, it will convert stringified JSON on the
app[data-data] to create the
data, but can also be used in conjunction with the inline bindings by adding
data-convert-bindings="true". You can prevent individual inline bindings from overriding what's in the main data object with
data-convert-binding="false" to the binding element.
You then use the
createAppTemplate() functions to convert your markup and pass it to the Vue instance.
Comment out the JS so you can easily see the difference between the pre-rendered and Vue-enhanced markup.
npm install quench-vue --save or yarn add quench-vue
There are 2 ways of defining and using data for the app:
1.With a stringified JSON object in the app container's
q-data attribute; and/or
- With an inline
q-bindingattribute on an element, when
q-convert-bindingsis added to the app container. Both techniques can be used together or on their own, but the
q-datais preferred as it's faster, simpler and more versatile. See some examples here.
The benefits gained are rendering fast, SEO-friendly static markup (either from a CMS, static-site generator or component library such as Fractal) and have it quickly and easily converted into a fully dynamic, client-side Vue.js application, without having to set up more complicated server-side rendering processes.
If you would like to explore more about Quench Vue, head to the project's repository on GitHub, where you will also find the source code.