The are many libraries out there for Vue.js. In this section, we are going to use the Vue Material toolkit. You can find out more at https://vuematerial.io. Let's get started:

1. Run the following NPM command to install the vue-material library in the project:

npm install vue-material

2. As part of Vue Material's integration, you may want to set up the Roboto font as well. Update the public/index.html file with the following code:

<link
      rel="stylesheet"
      href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"
    />

3. The easiest way to enable all Vue Material components is to import all the scope that's inside the src/main.js file. Later, you can optimize the imports and declare the components you are using:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';

Vue.use(VueMaterial);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. You should already have the essential configuration for routes since it was generated as part of the router plugin's installation. To integrate the routing component with Vue Material, please update the code inside the src/router.js file according to the next listing:

Vue.use(Router);

Vue.component('router-link', Vue.options.components.RouterLink);
Vue.component('router-view', Vue.options.components.RouterView);

Now that you have routing support in your Electron application, it's time to integrate the application toolbar.