Skip to content

Latest commit

 

History

History
38 lines (26 loc) · 1.97 KB

exercise-3.md

File metadata and controls

38 lines (26 loc) · 1.97 KB
Raw

Migrating Pages to Nuxt 3

Background

Transitioning from Nuxt 2 to Nuxt 3 requires careful migration of pages and their dependencies. Every page may present unique challenges, largely due to the version differences and missing dependencies. This exercise guides you systematically through migrating specific pages.

Exercise

👨‍💼 Page migration is pivotal in transitioning to Nuxt 3. Our aim is to move pages in a sequence, addressing issues and dependencies as they emerge.

Files

  • pages/products/index.vue
  • pages/about.vue
  • pages/about/nested.vue
  • pages/categories/[category_id]/products.vue
  • pages/categories/[category_id]/products/[product_id].vue

Steps:

  1. Preparation for Migration

    • As you move pages, anticipate errors due to differences between Nuxt 2 and 3 or missing dependencies.
    • Potential challenges might arise from missing layouts, plugins, or components.
    • Always have the Nuxt 3 Migration Guide close at hand and remember to seek community assistance if you encounter difficulties.

  2. Migrate products/index.vue

    • This step provides an introduction to setting up a simple route in Nuxt 3.

  3. Transfer about.vue and about/nested.vue

    • Learn the intricacies of setting up a straightforward route in Nuxt 3 that will later accommodate a nested route.
    • This step will teach you about creating a simple nested route in Nuxt 3.

  4. Transition categories/[category_id]/products.vue

    • Dive deep into the nuances of creating routes with parameters in Nuxt 3.
    • Remember, Nuxt 3 introduces a new file system routing system. Adapt all pages to this new format. Dive into the Dynamic Routes documentation for insights.

  5. Migrate categories/[category_id]/products/[product_id].vue

    • This step will challenge you with setting up a route in Nuxt 3 that has parameters and requires route validation.