Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

File-Based Navigation and Dynamic Routes

Explore how Nuxt 3 simplifies routing by using file-based navigation to automatically generate URL routes. Understand how to create dynamic routes with parameters by structuring your pages directory, enabling flexible and scalable Vue.js applications without manual route configuration.

We'll cover the following...

When we create a .vue file inside the pages directory, it creates a matching URL or route. For example, pages/about.vue will generate the https://yourwebsite/about URL.

Manual configuration in Vue.js

The file contents will then render, and this is referred to as file-system routing and can be convenient for the developer. Nuxt uses the same router as Vue.js, but in a Vue.js project, we need to set things up manually. Here is a typical router configuration file in Vue.js:

Javascript (babel-node)
import { createRouter } from "vue-router";
import HomeView from "../views/HomeView.vue";
import UserView from "../views/UserView.vue";
import AccountView from "../views/AccountView.vue";
const router = createRouter({
	routes: [
		{
			path: "/",
			name: "home",
			component: HomeView,
		},
		{
			path: "/user",
			name: "user",
			component: UserView,
		},
		{
			path: "/account/:id",
			name: "account",
			component: AccountView,
		},
	],
});
export default router;

  • Lines 1–4: We import the createRouter method from the vue-router library and the page components we want to display.

  • Lines 6–24: We create a routes array, and each path will link to ...