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
1-products folder,
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.
Products Folder;
we had products folder inside pages directory, so this products folder has some files in it. First one is index.vue,
pages/products/index.vue
index.vue is first page for;
http://localhost:3000/products
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.
Resource
