Home
Jamstack Explorers
Menu

Get Started with Nuxt with Debbie O'Brien

Nuxt Dynamic Routes

Let's create a dynamic page in Nuxt. Dynamic pages can be created when you don't know the name of the page due to it coming from an API or you don't want to have to create the same page over and over again.

To create a dynamic page you need to add an underscore before the .vue file name or before the the name of the directory, if you want the directory to be dynamic. You can name the file or directory anything you want but you must prefix it with an underscore.

Let's create a dynamic page called slug. We can copy whats in our index page and paste it in here and change the title to be "dynamic page".

We can now go to our browser and type in whatever we want. As we are on a mission lets type in mars and yes we get our dynamic page. OK cool. But how does it work exactly.

Nuxt uses Vue router which means we have access to the router properties such as params. We can see this in the Vue dev tools. You can install this extension in chrome or firefox if you don't already have it. Under routing you will see that our /mars page is shown as the slug.

Let's try changing it to jupiter. And you will see the slug has changed too . cool

We can access the router params in our template using $route.params.slug. Let's change the title to be dynamic.

{{$route.params.slug}}

Now in our browser anything we type in the URL will be the title of our page. Nice. We can travel to any planet.

Ok but it's not exactly very useful right now. Really we should be fetching data from an API. We will cover data fetching in the next lesson but while we are here let's take a quick look.

We can use asyncData to get data from our API. Inside our asyncData function we can create a const of planet which is equal to the results from our fetch, here we are using the native browser fetch API.

The URL for our API (https://api.nuxtjs.dev/planets) has all our planets. If we only want to get one planet then we can add the name of our planet. For example mars.

We then have to return our data so we can use it.

Let add a pre tag in our template and print out our data using $data to see what has been returned.

Ok it's looking good. We have data. We can see here we have a title and image. Let's use those. Instead of getting the title from our route params we can change it to be the title from our API.

planet.title

And let's change the logo to be the image we are getting from our API. We can now remove the data property. Let's add some styling to make sure all our images are the same height.

img {
  height: 80px;
  width: auto;
  object-fit: cover;
}

And now in our browser we can see we have landed on mars. Perfect. ish. If we change our planet to saturn we are still getting Mars. Our API call isn't very dynamic. Let's fix that. We want our API URL to read the route params and give us back the planet we want.

In asyncData we have access to the context which includes params so we can pass this into our asyncData function using destructuring.

{params}

We can then use $params.slug at the end of our url. We just need to wrap it in a template literal.

Now if we go to Saturn we really go to Saturn. What about Neptune. Nice.

We now have only one page to maintain yet we are getting as many pages as there are planets.

In the next lesson we will take a deeper look into data fetching.

Explorers

your progress

410