Accessing Route Parameters in Nuxt 3

Part 5 of 8 in Upgrading Nuxt 2 to Nuxt 3
Dan Pastori avatar
Dan Pastori March 30th, 2022

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.

Keep Reading
View the course View the Course Upgrading Nuxt 2 to Nuxt 3
Up Next → Dynamic API Requests with Nuxt 3

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?