This PR adds a file directory mountains that allows for dynamic routes to be created for each mountain in our list. In NuxtMountains.vue I added a nuxt-link that sets the params property to { id: mountain.title }, so that the route for each mountain page is /mountains/"mountain title".
Methodology
Since the mountains are being fetched from our mountains api, we can't tell how many mountains will be listed in our app and we can't foresee what their names will be. Therefore, dynamic routing helps us create routes for each moutain without knowing that information beforehand. We can pass a params property to our <nuxt-link> with a unique identifier for each mountain in our list and that will be passed to our router.
Additional notes
I tried to run the project after merging stepzen-samples/step-zen-nuxt:main into my local branches and I kept running into issues with dynamic imports. Nuxt 3 won't allow require() to be used, but some node modules are using require() and I wasn't sure how to change them to imports. Ultimately I couldn't run the project on my end, so I reverted back to using Nuxt 2 and made my updates.
Linked Issue
4
Description
This PR adds a file directory
mountainsthat allows for dynamic routes to be created for each mountain in our list. InNuxtMountains.vueI added a nuxt-link that sets the params property to{ id: mountain.title }, so that the route for each mountain page is/mountains/"mountain title".Methodology
Since the mountains are being fetched from our mountains api, we can't tell how many mountains will be listed in our app and we can't foresee what their names will be. Therefore, dynamic routing helps us create routes for each moutain without knowing that information beforehand. We can pass a
paramsproperty to our<nuxt-link>with a unique identifier for each mountain in our list and that will be passed to our router.Additional notes
I tried to run the project after merging stepzen-samples/step-zen-nuxt:main into my local branches and I kept running into issues with dynamic imports. Nuxt 3 won't allow require() to be used, but some node modules are using require() and I wasn't sure how to change them to imports. Ultimately I couldn't run the project on my end, so I reverted back to using Nuxt 2 and made my updates.