You're reading from Frontend Development Projects with Vue.js 3 Learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js

Product type Paperback

Published in Mar 2023

Last Updated in Feb 2025

Publisher Packt

ISBN-13 9781803234991

Length 628 pages

Edition 2nd Edition

Languages

JavaScript

Tools

Vue

Concepts

Front End Web Development

Authors (4):

Maya Shavin

Raymond Camden

Clifford Gurney

Hugo Di Francesco

View More author details

Table of Contents (20) Chapters

Preface

1. Part 1: Introduction and Crash Course

2. Chapter 1: Starting Your First Vue Project FREE CHAPTER

3. Chapter 2: Working with Data

4. Chapter 3: Vite and Vue Devtools

5. Part 2: Building Your First Vue App

6. Chapter 4: Nesting Components (Modularity)

7. Chapter 5: The Composition API

8. Chapter 6: Global Component Composition

9. Chapter 7: Routing

10. Chapter 8: Animations and Transitions

11. Part 3: Global State Management

12. Chapter 9: The State of Vue State Management

13. Chapter 10: State Management with Pinia

14. Part 4: Testing and Application Deployment

15. Chapter 11: Unit Testing

16. Chapter 12: End-to-End Testing

17. Chapter 13: Deploying Your Code to the Web

18. Index

Why subscribe?

19. Other Books You May Enjoy

Setting up navigation links with RouterLink

As we know, RouterView oversees rendering the correct active view content relative to the URL path; RouterLink, on the other hand, oversees mapping the routes to navigable links. RouterLink is a Vue component that helps users navigate within an app with routing enabled. RouterLink by default renders an anchor tag, <a>, with a valid href link generated by its to prop.

In our example app generated by Vite, since there are two routes pre-populated, there are also two RouterLink instances added to the <template> section of App.vue as the header navigation menu:

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
</nav>

Since we are using the web history mode with createWebHistory(), the to prop of each RouterLink should receive an identical value with the path property declared in the targeted route object (as...