Vue Router installation and setup - Mini Project: Build & Apply

Vue Router installation and setup

📖 Scenario: You are building a simple Vue 3 application that needs multiple pages. To navigate between pages, you will set up Vue Router.

🎯 Goal: Set up Vue Router in a Vue 3 project with two routes: Home and About. You will create the router, configure routes, and integrate the router with the main Vue app.

📋 What You'll Learn

Create a Vue Router instance with two routes: '/' for Home and '/about' for About

Create two simple Vue components: Home and About

Configure the router with these routes

Integrate the router with the Vue app in main.js

💡 Why This Matters

🌍 Real World

Most Vue apps with multiple pages use Vue Router to manage navigation and page components.

💼 Career

Understanding Vue Router setup is essential for frontend developers working with Vue to build multi-page or SPA applications.

1

Create Home and About components

Create two Vue components named Home.vue and About.vue. Each should have a simple template with an <h1> tag showing "Home Page" and "About Page" respectively.

Vue

Home Page -->

About Page -->

Need a hint?

Use the <template> tag and add an <h1> with the page name inside each component file.

2

Create router configuration with routes

Create a file named router.js. Import createRouter and createWebHistory from 'vue-router'. Import the Home and About components. Create a constant routes array with two route objects: one with path: '/' and component: Home, and one with path: '/about' and component: About. Then create a router instance using createRouter with history: createWebHistory() and the routes array. Export the router as default.

Vue

// Your code here to import vue-router and components
// Your code here to create routes array
// Your code here to create router instance
// Your code here to export router

Need a hint?

Remember to import the components and use createRouter with createWebHistory() and the routes array.

3

Integrate router with Vue app

In main.js, import createApp from 'vue', import App.vue, and import the router from './router.js'. Create the Vue app with createApp(App). Use the router with app.use(router). Mount the app to the element with id app.

Vue

// main.js
// Your code here to import createApp, App.vue, and router
// Your code here to create app, use router, and mount to #app

Need a hint?

Use createApp to create the app, then add the router with app.use(router), and finally mount it to #app.

4

Add router-view to App.vue

In App.vue, replace the default template content with a <router-view /> component. This will display the matched route component.

Vue

  
  



// No script needed

Need a hint?

The <router-view /> tag is where the matched route component will appear.