DEV Community

Jonathan P
Jonathan P

Posted on • Originally published at learningsomethingnew.com

Vue CLI Router + Vuetify plugins

banner

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Add the Vuetify plugin

Now let's add the vuetify plugin:

vue add vuetify
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

That's it, check your localhost to see the router buttons in action:

finished

Source can be found here

This article is cross posted from my blog

Top comments (0)