Vue.js 2 Web Development Projects

Universal App Structure

Writing a Universal App that runs both on the client and the server requires changing the architecture of the source code.

When running on the client, we are in a fresh context each time the page is loaded. That's why we used singletons instance of the root instance, the router, and the store until now. However, now we need to have a fresh context on the server as well--the problem is, Node.js is stateful. The solution is creating a fresh new root instance, router, and store for each request handled by the server.

1. Let's start with the router. In the src/router.js file, wrap the router creation into a new exported createRouter function:

      export function createRouter () {        const router = new VueRouter({          routes, mode: ...