Vue CLI Router + Vuetify plugins

#vue #vuetify #javascript

What is this?

A short tutorial about how to correctly combine Vue CLI's router plugin and vuetify plugin into one layout.

What's the problem?

Vue CLI plugins scaffold a recommended layout for you by changing the app files, but they also override each other's changes instead of combining them.

Let's go

In your workspace root, run the following:

vue create vuetify-router-demo
cd vuetify-router-demo

Select the default options - babel, eslint, yarn.

This will create the basic app layout.
Test it by running yarn serve.

Add the router plugin

Let's add the router plugin:

vue add router

The router plugin does a few things:

Creates the views folder with two example views: About and Home
Creates the router.js file to link between routes and views
Makes changes to main.js to add the router to the main Vue instance
Changes App.vue file to look like this:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

Add the Vuetify plugin

Now let's add the vuetify plugin:

vue add vuetify

And after running this, your App.vue file looks like this:

<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      //
    }
  }
}
</script>

Lo and behold, the router is gone.
The thing about Vue CLI plugins is that, as you can see, they can override each other's changes.

Notice that you can choose advanced when adding vuetify plugin, and opt out of the creation of sample vue files. But in this example we want to use the default layout suggested by the plugin.

Combine the two

So what's the expected layout of the App.vue file, when we want both vuetify and router?
We'll combine the two, inserting the router view and router links into vuetify's layout.
The router view will live inside the <v-content> which is the main app content, and the router links will stay in the <v-toolbar>.

<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>
          <router-link to="/">Home</router-link>
        </v-btn>
        <v-btn flat>
          <router-link to="/about">About</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>

    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      //
    };
  }
};
</script>