Delivering Vue.js components through JSON payload

by Mihael Haluga, February 25, 2020
Vue.js framework is designated as a progressive JavaScript framework, meaning that developers can opt-in which of its core features or libraries to use. Developers can add small components to their existing views or build an entire web page as Single page application. This flexibility is what made Vue popular with developers and why it is easy to learn.

Building Vue.js single page applications introduces the potential problem of having high response time until the page becomes interactive. By bundling all of the logic and templates the application will create a single large JavaScript file. This means the users will be exposed to loading spinners, skeleton UI or even blank pages before the script is fully parsed and page rendered. A non-negligible number of users will leave the web page in frustration. In newer versions of Webpack this problem can be solved by dynamically importing JavaScript components, which are then fetched only when needed. But what if you are building the application that will not utilize such build process (like micro frontend application that fetches separate Components) or are stuck with a legacy application (and can’t afford to do a full refactor) but you still want to decrease the bundle size and use full-featured Vue components?

Some clever usage of Vue.js and browser features will enable any application to fetch Vue components via API that returns them as JSON objects.

Compile Vue components during runtime

Every Vue component is a JavaScript object that through the Vue compiler is turned into a render function. Importing a complete build of Vue exposes the full API of Vue.js. Which is the key to this approach. Method compile on global Vue object enables your application to compile the template during runtime.
vuejs_code_1.png 54.3 KB
The compiled component object holds the template transformed to render function which then can be assigned to a Vue component configuration object with additional logic to create Vue component. Anywhere in Vue application, this component can be used where its parent will insert it in the place of <component /> placeholder (courtesy of Vue dynamic components).
vuejs_code_2.png 18.1 KB

Transform Vue Single File Components into JSON object

Let's say that this is the component that will be returned by API response:
vuejs_code_3.png 155 KB
Here we have a simple form with two inputs and a submit button. Pressing the button will submit the form and send values of the inputs to the browser’s console. This code is presented in a Single File Components style which is usually compiled by webpack, so we need to transform it in such a way that it can be delivered as JSON payload:
vuejs_code_4.png 142 KB
In the JSON object, there are properties name, template, data, and script. What may create confusion at first glance is script property, just look at it the same as regular <script /> element in your HTML that is delivered to the page as simple text and then parsed by the browser as JavaScript code. This is exactly how it will be used, upon receiving this payload this script property will be inserted in a new <script /> element which will create Vue component logic object for the component on the window so it will accessible anywhere in the application. Name will be used to easily get new Vue component from the window object, template for compiling components vue-flavored HTML and data for giving the component some stateful properties.

(Note: data can be included in the script property but it is separated to enable dynamic additions or manipulations to the state)

(Note: usage of backticks is to make this object more readable but in reality that would be regular escaped strings so all of the browsers can parse them)

Insert JSON Vue component in the Vue application

vuejs_code_5.png 155 KB
Above is the code for Wrapper Vue component that will dynamically insert any component returned by the API as JSON payload described in the previous segment of this article. The component receives the payload object as a prop fragment, then compiles the template, assigns the behavior to the component, and finally inserts the component in the application and thus into the DOM.

What makes all of this work (beside Vue framework features) is browser's default DOM API. New script HTML node is appended to the body with text representing Vue configuration object as its innerHTML property. Upon appending the node to the body the browser will parse the script and create new object on window.
vuejs_code_6.png 36.4 KB
After that point the Vue component is assigned to the currentFragmet state in the Wrapper and then it replaces <component /> placeholder component in the DOM.

Conclusion

By applying these solutions it is easy to create API for Vue.js components. Delivering reusable components becomes easier across multiple sites and repositories. Any application that has permission to fetch components from the API can lazily insert new components into the page. All of those components can hold any valid JavaScript logic so web page will not lose any modern UI features that user have come to expect and developers can utilize all of the features of Vue Single file components.
About the author:
Author avatar
Mihael Haluga
Full Stack Developer
An avid reader of historical fiction, a retro gamer who can’t accept the always-on nature of modern games, a coder who likes to keep it simple and a rookie tech blogger.
Need help with Delivering Vue.js components through JSON payload? Contact us!