Amanda McNeal

The Wizards Play Network site was originally built with Nuxt 2, which had reached end-of-life and was no longer receiving updates or security patches. This posed a growing risk to long-term stability and maintainability. The goal was to upgrade the codebase to Nuxt 3 to ensure continued support and security, while also improving performance, taking advantage of Vue 3’s Composition API, better SSR handling, and Vite integration. The migration needed to be seamless for both users and content editors.

• The original Nuxt 2 implementation included outdated dependencies and third-party modules that weren’t directly compatible with Nuxt 3.
• The site needed to remain live throughout the transition, with no downtime or disruption to user experience.
• The site supported multiple locales, which required custom i18n configurations to be refactored for Nuxt 3.
• The site’s content was powered by a headless CMS (Contentful), and its API usage had to be restructured for compatibility with the Composition API and new fetch patterns.
• TypeScript was introduced into a codebase that had been written entirely in JavaScript, exposing numerous data inconsistencies and edge cases, particularly around optional CMS fields that had previously gone unchecked.
• The design of the site had to remain exactly the same.

• Audited the Nuxt 2 codebase to identify breaking changes, deprecated modules, and redundant logic that could be removed during migration.
• Created a separate Nuxt 3 codebase in a new repository to isolate development and prevent accidental disruption of the live site.
• Rebuilt all API interactions using useFetch and useAsyncData with the Composition API, normalizing responses to handle missing or inconsistent CMS data more reliably.
• Reconfigured internationalization using Nuxt 3’s @nuxtjs/i18n module with consistent route strategy and CMS-driven locale support.
• Introduced TypeScript incrementally, using strict typing to identify unsafe data access patterns and enforce consistency across CMS-driven content structures.

• Migrated all Vue components to <script setup>, simplifying logic and making the codebase easier to reason about.
• Leveraged Nuxt 3’s built-in Vite support to reduce build times and improve runtime performance.
• Maintained parity with the original site’s SEO metadata, canonical tags, and structured data, ensuring no ranking loss post-upgrade.
• Introduced TypeScript throughout the codebase, strengthening type safety and uncovering previously hidden edge cases in CMS content handling.

• The upgraded codebase is significantly more maintainable, leveraging modern tooling, modular architecture, and Composition API patterns to streamline future development.
• TypeScript integration and improved CMS handling reduced potential runtime errors and made content-related logic more predictable.
• Developer onboarding is faster and more intuitive thanks to clearer structure, consistent conventions, and comprehensive use of Vue 3 and Nuxt 3 best practices.