Nuxt 4 - Vue 3フレームワークの最新版

Nuxt 4の概要

Nuxt 4は、Vue 3エコシステムの最新技術を取り入れた大型アップデートです。より高速な起動、改善されたDX、新しいディレクトリ構造が特徴です。

新しいディレクトリ構造

project/
├── app/
│   ├── components/
│   ├── composables/
│   ├── layouts/
│   ├── pages/
│   ├── plugins/
│   └── app.vue
├── public/
├── server/
│   ├── api/
│   ├── middleware/
│   └── plugins/
├── nuxt.config.ts
└── package.json

変更点: アプリケーションコードがapp/ディレクトリに移動し、サーバーコードと明確に分離されました。

パフォーマンスの改善

起動時間の短縮

開発サーバー起動:
- Nuxt 3: 2.5秒
- Nuxt 4: 1.2秒 (52%高速化)

ホットリロード:
- Nuxt 3: 300ms
- Nuxt 4: 100ms (66%高速化)

ビルド最適化

// nuxt.config.ts
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  experimental: {
    // 新しい最適化オプション
    sharedPrerenderData: true,
    compileTemplate: true
  }
});

新しいData Fetching

useAsyncData の改善

useFetch の型安全性

サーバーサイドの改善

Nitro 3統合

// server/api/users.ts
export default defineEventHandler(async (event) => {
  // H3の新機能
  const query = getQuery(event);
  const body = await readBody(event);

  // バリデーション
  const schema = z.object({
    name: z.string()
  });
  const validated = await readValidatedBody(event, schema.parse);

  return { users: [] };
});

サーバーコンポーネント

新しいコンポーザブル

usePreviewMode

useLoadingIndicator

Layers の強化

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '@my-org/ui-layer',
    '@my-org/auth-layer',
    '../shared-config'
  ]
});

my-app/
├── layers/
│   ├── ui/
│   │   ├── components/
│   │   └── nuxt.config.ts
│   └── auth/
│       ├── composables/
│       └── nuxt.config.ts
└── nuxt.config.ts

モジュールエコシステム

# 主要モジュール
npx nuxi module add @nuxt/image
npx nuxi module add @nuxt/ui
npx nuxi module add @nuxtjs/i18n
npx nuxi module add @pinia/nuxt

移行ガイド

# 自動マイグレーション
npx nuxi upgrade --force

# Codemod
npx codemod nuxt/4/new-directory-structure

主な破壊的変更

まとめ

Nuxt 4は、パフォーマンスの大幅な改善と新しいディレクトリ構造により、より快適な開発体験を提供します。Vue 3エコシステムの最新機能を活用し、モダンなWebアプリケーションを構築できます。