When Nuxt3 was released, a plan had to be made to use this for new and existing projects that run in Nuxt2. I was in the lead of this project to first translate this idea to achievable goals and tasks, and make a roadmap planning and estimation for this project. After this plan was made i was the lead developer and was assisted by my colleague devs.

This was quite a big project, because there already was a Nuxt2 setup, and all features in there had to also exist in the new setup. And the migration of these projects should not be too complex. Below is an overview of the biggest tasks and challenges.

To prevent duplicate code, there had to be a centralised module that contains standard features that all projects have. The most important features are:

• API communication 
  Wrappers for useFetch an $fetch and predefined endpoints
• Types
  Fully typed API data with the option to modify/extend them for project specific types
• Routing
  Dynamic routing based on API data, also multi language
• Dynamic pages 
  One [...slug].vue for all pages that renders a fully dynamic page that contains async components
• SEO optimalisation 
  Automatic meta tags and structured data sync per route
• Localisation with i18n
  Language based on current route
• Tailwind 
  Standardised config that works for every project
• SVG icons
  Custom svg solution that can be used in both Scss and vue templates

The vue2 setup used vuex stores, which is not well supported in vue3 and also lacks good typescript support. So a refactor had to be made to Pinia. The pinia stores are mainly use to store API data like Routes, Configs, Component data and Menus, but also for user specific data as accessibility settings.

All mixins from the nuxt2 setup had to refactored to composables. Also some new composables were introduced to reduce custom duplicate code per project. Some example composables are 'useForm', 'useFilters', 'useApiFetch', 'useScroller' and 'useHistory'.

This new setup has been used in multiple projects that are live now. Examples are https://www.werkenbijaswatson.nl ,  https://careers.webfleet.com , https://werkenbij.diensttoeslagen.nl and https://www.kenonz.nl .