Overview

I performed a large-scale dependency package update, including a major update from Nuxt 3.2.3 to 3.20.2.

Major Package Updates

PackageBeforeAfter
nuxt3.2.33.20.2
@nuxt/content2.5.23.11.0
@nuxtjs/i18n8.0.0-beta.1010.2.1
vuetify3.1.83.7.6
sass1.58.31.83.4
@mdi/js7.1.967.4.47

Newly Added Packages

  • better-sqlite3: ^12.5.0 - Dependency of @nuxt/content v3
  • vue-i18n: ^11.0.0 - Dependency of the i18n module

Changes That Required Action

1. Migration to @nuxt/content v3

Creating a new content.config.ts was required.

// content.config.ts
import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

2. Migration to @nuxtjs/i18n v10

Changes in nuxt.config.ts

// Before
i18n: {
  locales: [
    { code: "ja", iso: "ja_JP", file: "ja.js" },
    { code: "en", iso: "en-US", file: "en.js" },
  ],
  langDir: "locales/",
  vueI18n: {
    fallbackLocale: lang,
  },
}

// After
i18n: {
  locales: [
    { code: "ja", language: "ja-JP", file: "ja.js" },  // iso → language
    { code: "en", language: "en-US", file: "en.js" },
  ],
  bundle: {
    optimizeTranslationDirective: false,
    runtimeOnly: true,
  },
  langDir: "locales",  // Removed trailing slash
  vueI18n: "./i18n.config.ts",  // Externalized to a file
}

Creating a new i18n.config.ts

export default defineI18nConfig(() => ({
  legacy: false,
  fallbackLocale: "ja",
}));

Moving the locales folder

locales/ → i18n/locales/

3. Changes to runtimeConfig Access Methods

// Before
runtimeConfig.app_baseURL
runtimeConfig.menus
$config.title

// After
runtimeConfig.app.baseURL
runtimeConfig.public.menus
$config.public.title

4. TypeScript Type Imports

// Before
import { Menu } from "@/types/Menu";

// After
import type { Menu } from "@/types/Menu";