Matching static and dynamic patterns in Nuxt 3

Nuxt 3 has had a largely positive reception since its release in October 2021. The release came with cool features, like bracket notations for matching dynamic routes and improvements in server routing and the general workflow.

This post will discuss routing patterns in Nuxt 3. We will cover:

• Mixing and matching static and dynamic text within a route
• Creating partial matches on child routes
• Using multiple dynamic matching

As a prerequisite for this tutorial, you should have basic knowledge of the Vue.js framework.

Mixing and matching static and dynamic text within a route

In Nuxt 3, we can mix and match static and dynamic segments in a route path by using the : character to denote dynamic segments. For example, if we wanted to define a route with a static path of /products and a dynamic segment called id, we could achieve this like so:

{
  path: '/products/:id',
  component: ProductPage
}

In this example, the id segment will be treated as a dynamic segment, which means that it can be any value that we pass to the route. For example, if we navigate to the **/products/123** URL, the id segment will be set to 123.

To access the value of the dynamic segment in our component, we can use the $route object, which is provided by Nuxt.js. For example, if we wanted to access the id segment in the ProductPage component, we could use the $route.params property like this:

export default {
  computed: {
    productId() {
      return this.$route.params.id
    }
  }
}

Then, we can use the productId computed property in our component to access the value of the id segment. Keep in mind that the $route object is reactive, which means that it will update automatically whenever the route changes.

In summary, to mix and match static and dynamic segments in a route path in Nuxt.js v3, we can use the : character to denote dynamic segments. We can then access the values of those segments using the $route object in your component.

We can achieve this in Nuxt 2 using the same strategy, but with a different naming pattern for the dynamic file. For example, in Nuxt 3, a dynamic file is denoted using the [] notation, whereas in Nuxt 2, we would use the _ notation.

Creating partial matches on child routes

In Nuxt 3, you can use dynamic parameters to implement partial matches in child routes.

A dynamic parameter is a path segment that starts with a colon : and matches any value. For example, if you wanted to create a route that matches any user ID, you could define a route like this:

/users/:id

This route will match any URL that starts with /users/ and is followed by any value. For example, this route would match all of the following URLs:

/users/123
/users/abc
/users/user123

To access the value of the dynamic parameter in your route component, you can use the $route.params object. For example, if the URL is /users/123, you can access the value of the id parameter like this:

const id = this.$route.params.id

You can also use dynamic parameters in child routes. For example, if you have a route that displays user details, you might define a child route like this:

/users/:id/details

This route will only be matched if the URL is a child of the /users/:id route. It will inherit the value of the id parameter from the parent route. However, it would not match the URLs below because they do not have a value for the :child parameter:

/parent
/parent/

To make the route match partial URLs, we can use the _ syntax in the path like this:

{
    path: '/parent/_*',
    component: './parent/child.vue'
}

The route above would match the following URLs:

/parent/abc
/parent/xyz
/parent
/parent/

The _ parameter will now match any value after the /parent/ part of the URL, including an empty string.

Using multiple dynamic parameters for route matching

In Nuxt 3, you can use multiple dynamic parameters to implement complex route matching.

For example, if you wanted to create a route that matches a product detail page, you might define a route like this:

/products/:category/:productId

The route above will match any URL that starts with /products/ and is followed by a value for the category parameter, then followed by a value for the productId parameter. For example, this route would match all of the following URLs:

/products/books/123
/products/clothing/abc
/products/electronics/xyz

To access the values of the dynamic parameters in your route component, you can use the $route.params object. For example, if the URL is /products/books/123, you can access the values of the category and productId parameters like this:

const category = this.$route.params.category
const productId = this.$route.params.productId

You can also use dynamic parameters in child routes. For example, if you have a route that displays product reviews, you might define a child route like this:

/products/:category/:productId/reviews

The route above will only be matched if the URL is a child of the /products/:category/:productId route. Additionally, it will inherit the values of the category and productId parameters from the parent route.

You can also define multiple dynamic routes in the nuxt.config.js file. For example, if you have a list of user profiles that you want to make available at the /profile/:id URL, we can define a dynamic route like this:

// nuxt.config.js

export default {
  // ... other Nuxt.js configuration options

  // define the dynamic routes
  generate: {
    routes: [
      '/profile/:id',
      // add additional dynamic routes here as needed
    ]
  }
}

Then, in the pages/users/[id].vue page component, you can access the id parameter using the $route object provided by Nuxt.js. For example:

// pages/products/[id].vue

export default {
  data() {
    return {
      product: null
    }
  },
  async asyncData({ $route }) {
    // fetch the user data using the `id` parameter from the URL
    const product = await fetchProducts($route.params.id)

    return {
      product
    }
  }
}

When the page is rendered, Nuxt.js will automatically generate a static version of the page at the appropriate URL — for example, /users/123 — with the user data already included in the page. This allows us to use dynamic routes while benefiting from the performance advantages of static site generation.

Conclusion

To conclude, let’s go over a quick summary of what we covered in this article.

Nuxt is a framework similar to Next.js for building server-rendered Vue.js applications. It provides a powerful way to create routes for your application using the concepts of pages and layouts. In Nuxt 3, you can use static patterns and dynamic parameters to define routes that match specific URL patterns.

Static patterns are simple string patterns that match a specific URL exactly. For example, you might define a route like /about that matches the /about URL exactly.

On the other hand, dynamic parameters are path segments that start with a colon : and match any value. You can use dynamic parameters to create routes that can match any possible value, making it easier to create routes that can handle dynamic data.

In this post, we went over some of the popular routing advancements in Nuxt 3 with some practical implementation examples, looking forward to the next versions. Let me know what features you’ll be expecting from the Nuxt team, or hone your skills by reading more about developing with Nuxt.