Vue Router Essentials

Welcome back! In the previous lesson, you learned how to use custom composables in Vue 3 to organize and reuse logic across your application. You saw how composables like useTodos can help keep your components clean and focused. Now, as your application grows, you will often want to split it into multiple pages or views. This is where client-side routing comes in.

Client-side routing lets you build single-page applications (SPAs) that feel fast and seamless. Instead of loading a new page from the server every time a user clicks a link, your app can switch between different views instantly, all within the browser. In Vue, this is made possible by the Vue Router library.

In this lesson, you will learn how to set up and use Vue Router in a modern Vue 3 application. You will see how routing works alongside custom composables and how to create a simple but powerful navigation structure for your app. By the end, you will be able to add multiple pages to your Vue project and navigate between them smoothly.

Before you can use routing in your Vue app, you need to set up Vue Router. On your own computer, you would install it with a command like npm install vue-router, but here on CodeSignal, everything is already set up for you. This means you can focus on learning and building without worrying about installation steps.

To integrate Vue Router into your app, you need to import it and tell your Vue application to use it. This is done in the src/main.js file. Here is how it looks:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // Import the router
import './assets/css/main.css'

const app = createApp(App)

app.use(router) // Tell the Vue app to use the router

app.mount('#app')

In this code, you first import the router from the src/router directory. Then, after creating your Vue app, you call app.use(router) to enable routing. Finally, you mount the app to the page. This setup tells Vue to handle navigation and view changes using the router you define.

With Vue Router added to your app, the next step is to define the routes — these are the different pages or views your users can visit. The routes are set up in the src/router/index.js file.

Here is an example of a simple router configuration:

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

In this file, you import the createRouter and createWebHistory functions from Vue Router, as well as the components for your pages. The routes array defines two routes: one for the home page (/) and one for the about page (/about). Each route has a path, a name, and a component that will be displayed when the route is active.

The createRouter function creates the router instance, using the browser's history mode for clean URLs. Finally, you export the router so it can be used in your main app file.

When a user visits /, the HomeView component will be shown. When they visit /about, the AboutView component will appear. This is how you connect URLs to different parts of your app.

Now that your routes are defined, you need a way for users to navigate between them. This is done in your main layout file, src/App.vue. Vue Router provides two special components for this: <router-link> and <router-view>.

Here is how your main layout might look:

<template>
  <div id="layout">
    <header>
      <nav>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
      </nav>
    </header>
    <main>
      <!-- The component for the current route will be rendered here -->
      <router-view />
    </main>
  </div>
</template>

The <router-link> component creates navigation links that update the URL and show the correct view without reloading the page. When you click "Home" or "About," the app will switch views instantly. The <router-view> component is a placeholder where the active route's component will be rendered.

For example, if you click the "About" link, the URL will change to /about, and the AboutView component will appear in the main area. If you click "Home," the HomeView will be shown instead. This makes your app feel fast and modern.

Let’s look at the two sample views in this app: HomeView.vue and AboutView.vue.

The HomeView.vue file is where you integrate your custom composable, useTodos. This view displays your task manager, allowing users to add, filter, and manage their tasks. Here is a simplified version of the code:

<script setup>
import TodoItem from '../components/TodoItem.vue';
import TodoForm from '../components/TodoForm.vue';
import { useTodos } from '../composables/useTodos.js';

const { 
  filter, 
  filteredTodos, 
  activeCount, 
  addTodo, 
  handleToggleComplete, 
  handleDeleteTodo 
} = useTodos();
</script>

<template>
  <div class="task-manager">
    <h1>Task Manager</h1>
    <TodoForm @add-todo="addTodo" />
    <div class="filter-controls">
      <button @click="filter = 'all'">All</button>
      <button @click="filter = 'active'">Active</button>
      <button @click="filter = 'completed'">Completed</button>
      <span>{{ activeCount }} items left</span>
    </div>
    <ul>
      <TodoItem
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @toggle-complete="handleToggleComplete"
        @delete-todo="handleDeleteTodo"
      />
    </ul>
  </div>
</template>

This view uses the useTodos composable to manage all the logic for your to-do list. The component itself is focused on displaying the UI and handling user actions. This is a great example of how composables and routing work together: the route decides which view to show, and the composable provides the logic for that view.

The AboutView.vue file is much simpler. It displays static content about the app:

<template>
  <div class="about-page">
    <h1>About This App</h1>
    <p>This is a Task Manager application built to demonstrate modern Vue.js concepts, including:</p>
    <ul>
      <li>The Composition API</li>
      <li>Reusable Components</li>
      <li>Custom Composables for logic reuse</li>
      <li>Vue Router for client-side navigation</li>
    </ul>
  </div>
</template>

When you visit /about, this content is shown in the main area of your app. This shows how easy it is to add new pages and content using Vue Router.

In this lesson, you learned how to add client-side routing to your Vue 3 application using Vue Router. You saw how to configure the router, define routes for different pages, and build a main layout that lets users navigate between views. You also explored how routing works together with custom composables, keeping your logic organized and your UI clean.

With this knowledge, you are ready to build apps with multiple pages and smooth navigation. In the next exercises, you will get hands-on practice with Vue Router — defining your own routes, creating new views, and connecting everything together. As you continue, try adding more pages or features to your app and see how routing and composables make your code easier to manage.

Keep experimenting and exploring. You are building a strong foundation for modern Vue development!