DEV Community

loading...

Routing using Vue Router

iarehilton profile image Hilton Meyer Originally published at hiltonmeyer.com on ・2 min read

Setting up Vue Router #

After the initial setup in the previous post. One of the first things I want to to is add routing so that I will be able to create the navigation required to be able to get to all the views in the application. Vue Router is the official router for Vue and makes things super simple to setup although based on the current setup and in hindsight I could of simply added the routing in the setup but I prefer to do it this was to keep things simple. A simple command will not only setup the routing but the scaffolding of the views and the routing directories which is pretty awesome.

vue add router

Enter fullscreen mode Exit fullscreen mode

directory layout

As you can see with this command we have routing setup and ready to go although there'll be errors now as it tries to add the hello world example from the vue install. So in the views/Home.vue file set the <template> as follows

<template>
  <div class="home">
    <img
      alt="App logo"
      src="https://res.cloudinary.com/hiltonmeyer-com/image/upload/v1611488325/pantry/cooking-robot_xdaw7k.png"
    />
    <h1>Pantry</h1>
    <h2>Kitchen Manager</h2>
  </div>
</template>

Enter fullscreen mode Exit fullscreen mode

I also made a view small tweaks in the App.vue file to get the color scheme going although this may need to be placed somewhere else, but for now I've changed the <style> to this

<style>
:root {
  --clr-neutral-500: #2c3e50;

  --clr-accent-500: #00b8f0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--clr-neutral-500);
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: var(--clr-neutral-500);
}

#nav a.router-link-exact-active {
  color: var(--clr-accent-500);
}
</style>

Enter fullscreen mode Exit fullscreen mode

So after the routing we have an application that looks like this which I think isn't that bad after what is basically two commands

Current Layout

Discussion (0)

Forem Open with the Forem app