Accessing Route Parameters in Nuxt 3

Accessing route parameters is an essential for your Nuxt 3 app. Route parameters are the dynamic pieces of your URL that determine what resource or content is loaded. If you are following along in this migration guide, you probably have seen them accessed in action. In the last section, we loaded async data from the API to display a company or cafe in ROAST. To load the specific resource, we grabbed a route parameter. Let's touch on some of what it took to migrate ROAST from Nuxt 2 to Nuxt 3 and access the route parameters.

Step 1: Naming Pages

The first step in using route parameters is to set up your naming conventions for your pages correctly. In both Nuxt 2 and Nuxt 3, the way you name your page component reflects the name of the variable. Let's use the individual company URL which would match https://roastandbrew.coffee/companies/{company}.

The {company} would be the dynamic route parameter we will want to access. However, in order to even gain access, we have to set up our page structure correctly.

Nuxt 2 Page Naming Conventions

There are two ways you could do this in Nuxt 2. First, would be to add a page in the pages directory named /pages/companies/_company.vue. Any page prefixed with an _ would be accessible as a route parameter with the name following the _ (I.E. company).

The second way you could do this with Nuxt 2 is if you had a directory that started with an _ and you named a vue page within that directory index.vue. The directory would look like: /pages/companies/_company/index.vue. This approach is recommended if you have a page to edit a resource. You could throw an edit.vue file in the directory and get the following URLs: https://roastandbrew.coffee/companies/{company} and https://roastandbrew.coffee/companies/{company}/edit.

Nuxt 3 Page Naming Conventions

To migrate these pages to Nuxt 3, the first step is updating the naming conventions. Instead of an underscore, you need to change the name to be bracketed. For example, if we had /pages/companies/_company.vue in Nuxt 2, we'd change the name to be /pages/companies/[company].vue in Nuxt 3.

The same process goes for folder naming conventions. You'd have to update /pages/companies/_company/index.vue to be /pages/companies/[company]/index.vue in Nuxt 3. Simple update, but important nonetheless.

Step 2: Accessing Dynamic Route Parameters

Now that we have our page layouts named correctly, we can access the dynamic route parameters that we configured. This is useful when you want to load a resource by its identifier on the page. Let's take a look at what we had in Nuxt 2:

this.$route.params.company

In Nuxt 2, you could access the route parameters by accessing the global $route plugin. You'd then access the company variable under the params key.

In Nuxt 3, the same functionality looks like:

const route = useRoute();
route.params.company

You can access the route object once you load it from the useRoute() composable function. This must be set up in your setup() method or your <script setup> since it's an auto loaded composable. Same functionality, slightly different syntax!

Conclusion

Migrating the page naming conventions and route structure isn't too bad from Nuxt 2 to Nuxt 3. Moving to the Composition API just makes your code more flexible. In our book, we have a fully functioning Nuxt 3 app where you can see what everything looks like put together and running in production.

If you have any questions, feel free to reach out on Twitter or on our community forum.