Quench Vue: Client-side hydration of pre-rendered Vue.js apps

Quench Vue

Quench Vue allows server-rendered/static markup to be used as the data and 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.

Demo

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 createAppData() and 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.

Rehydrating pre-rendered html in Vue.js with Quench Vue

Usage

Installation

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

  1. With an inline q-binding attribute 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-data is 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.