# Post installation notes

At installation, this plugin will try to fix your current project code to make it compatible with Vue SSR. If you install others Vue CLI plugin after UVue, you have to run ssr:fix command.

But you need to keep in mind some various things to succeed in building SSR apps:

# Avoid stateful singletons

Avoid to create singletons in the global scope, beacuse they will be shared accross all HTTP requests and so accross all users that use your application.

You can read more from the official documentation

# Vue plugins

Basically you'll see this plugin overwrite some of your code to avoid stateful singletons for some Vue plugins. For example, Vue Router: instead of simply defining a new Router(), we need to create a factory function that return the new Router instance:

export default () => {
  return new Router(/* ... */);
};

Then we call this one inside the another function defined in your main.js file:

import createRouter from './router';

export default () => {
  return new Vue({
    router: createRouter(),
  });
}

Because this function will be called on each HTTP request, we are sure that with a fresh router instance for each users.

# HTTP/AJAX client

Pay attention to others JS packages that works outside of Vue. In this example we'll see an important feature: AJAX calls. Indeed, some apps will need to store an access token or JWT to fetch protected data.

Here is an example with axios:

import axios from 'axios';

export const httpClient = axios.create({
  /* ... */
});

export async function login() {
  // POST request
  const { data } = await httpClient.post(/* ... */);

  // Get token from response
  if (data.token) {
    // Store it on our httpClient
    httpClient.defaults.headers.common['Authorization'] = data.token;
  }
}

export function getProtectedData() {
  // GET request with defaults
  const { data } = await httpClient.get(/* ... */);
  
  // ...
}

This code will work but there is an important leak here: on server-side httpClient will be created once and shared across all HTTP requests. So users will share their tokens...

To avoid that you can create an UVue plugin and use its hooks to instantiate httpClient.

Example here

# Router mode

Your router needs to be in history mode:

export default () => {
  return new Router({
    mode: 'history',
    // ...
  });
};

# Vuex states

Like Vue plugins or JS packages, you need to be careful on how you create your Vuex states, in this case, you need to use factory functions too:

export default {
  state: () => ({
    // Your variables here
  }),
  // mutations, actions, getters...
}

# Write SSR compatible component

Consider reading this excellent article from Alexander Lichter