Pages Directory in nuxt.js
Nuxt.js gives us very powerful feature that we don’t have to do routing for pages. Nuxt.js does page routing for us.
Let’s do pages with the example;
As you can see on the above picture, we have pages directory and this directory has
2- index.vue file
3- my-items.vue file.
let’s start we have pages/index.vue file ,
This file is the first page that when we upload the page, that is the page what user see when he get into the site. Like localhost:3000
my-items.vue is a different page for our application.
For this page, you don’t need any routing we just add my-items in our directory and that is it, Nuxt does the rest for us.
we had products folder inside pages directory, so this products folder has some files in it. First one is index.vue,
index.vue is first page for;
So pages/products is a page, whatever we code on this index.vue, we will be having everyting on this http://localhost:3000/products page.
don’t mix this pages/products/index.vue with pages/index.vue
they have same name with index.vue but, their functionality is different
one pages/index.vue gives us first page what user see, other pages/products/index.vue gives us http://localhost:3000/products
last thing is to make dynamic page
So I’m making the dynamic page inside products
to make a dynamic page, we add _id.vue, inside the products folder which means that we are doing dynamic page inside the products
http://localhost:3000/products/3, this number 3 , could be any number we have in our array’s each object’s id.
I took the example from this source below the YouTube video.