Jump Start with Vue 3/

...

/

Installing Vue Router

Installing Vue Router

Learn how to install Vue Router locally.

We'll cover the following...

Installing Vue Router

The router can be easily added to our app from Vue CLI or via npm by running the following command:

npm install vue-router

Let’s install the router ourselves via npm and run through the steps needed to get a basic example up and running.

If you haven’t already, use Vue CLI to create a new project based on the “default” preset. After it has finished installing, change the directory into the project’s root folder and run the following command:

npm install vue-router@4

Once the router library is installed, we need to configure it and add some routes to map URLs to components. Let’s create a file called router.js inside the src folder and add the following code:

Press + to interact
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

We start by importing the createRouter() and createWebHistory() methods from ...