Coding Challenge: Routing Using Nuxt

Problem statement

In this challenge, create a Nuxt project to switch between pages and dynamic routes and display a product ID from the params. Some files have been created to modify, and you can add your code. A default.vue file has been added to the layouts directory. The about.vue and contact.vue file has been added to the pages directory for navigation. A Product.vue component has been added to the components directory, which is complete to display the product title.

The index.vue file has been created to loop over the products object and render the Product.vue component. This component is passed the product as a prop. An empty [id].vue file has been added to the pages directory. Complete the project by completing the following steps:

• Add navigation links to the layouts/default.vue file to link to “/,” “/contact,” and “/about.”

• Complete the pages/index.vue file by wrapping the <Product /> component with a NuxtLink component to link to each product ID, e.g., “/1” or “/2.”

• Use the pages/[id].vue file to access the params from the router, the params required is the product ID. Display this ID inside the pages template.

Try it yourself

You can implement your solution in the code widget provided below:

If you’re unsure how to do this, click the “Show Hint” button.