DEV Community

Hilton Meyer
Hilton Meyer

Posted on • Originally published at hiltonmeyer.com on

Routing using Vue Router

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay