A Beginner’s Guide To Nuxt 3/

...

/

File-Based Navigation and Dynamic Routes

File-Based Navigation and Dynamic Routes

Explore Nuxt's unique file-based navigation and how to enable dynamic routes.

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 ...