Now that we are done with the server, we want to move to the frontend.

We will create a new Vue application using the Vue CLI tool.

npx @vue/cli fnn-vue-base
cd fnn-vue-base
yarn serve

 This will run  the frontend application and serve it on http://localhost:8080/ 

We will need the vuex some other dependencies such as vue-router and vuex-router-sync  to manger the routes in our application.   vuex-router-sync ensures vue-router and vuex store are in sync.

yarn add vuex
yarn add vue-router     
yarn add vuex-router-sync

For an in-depth look at how to set up the vue-router have a look at this link.  The additional vuex-router-sync is an npm package for  keeping the vue-router and vuex store in sync.

In our generated frontend vue application, we will edit set up these dependencies as shown below: 

import Vue from "vue";
import { sync } from "vuex-router-sync";

import App from "./App";
import router from "./router";
import store from "./store/store";

sync(store, router);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
	el: "#app",
	router,
	store,
	render: h => h(App)
});

As seen from the above code snippet, we have to set up two folders, one to keep the route files and the other for our store. 

In the next sections, we will set up the vuex store and eventually the components and stores.