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

パフォーマンスの改善

起動時間の短縮

開発サーバー起動:

• 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 の改善

<script setup lang="ts">
// キャッシュとデデュプリケーションの改善
const { data: users, pending } = await useAsyncData('users', () => {
 return $fetch('/api/users');
}, {
 // 新しいオプション
 dedupe: 'cancel',
 getCachedData(key) {
 // カスタムキャッシュロジック
 return nuxtApp.payload.data[key];
 }
});
</script>

useFetch の型安全性

<script setup lang="ts">
// 完全な型推論
const { data } = await useFetch('/api/users');
// data は自動的に型付け

// $fetch も型安全
const user = await $fetch('/api/users/123');
</script>

サーバーサイドの改善

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: [] };
});

サーバーコンポーネント

<!-- server-only コンポーネント -->
<template>
 <div>
 <!-- サーバーでのみレンダリング -->
 <DatabaseStats :stats="stats" />
 </div>
</template>

<script setup lang="ts">
// サーバーサイドでのみ実行
const stats = await db.getStats();
</script>

新しいコンポーザブル

usePreviewMode

<script setup lang="ts">
const { enabled, toggle } = usePreviewMode();

// プレビューモードの状態に応じた表示
</script>

<template>
 <button @click="toggle">
 {{ enabled ? 'プレビュー終了' : 'プレビュー開始' }}
 </button>
</template>

useLoadingIndicator

<script setup lang="ts">
const { isLoading, progress, start, finish } = useLoadingIndicator();

async function handleClick() {
 start();
 await heavyOperation();
 finish();
}
</script>

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アプリケーションを構築できます。

参考リソース

• Nuxt 公式ドキュメント
• Nuxt 公式サイト
• GitHub - nuxt/nuxt
• Nuxt 4 アップグレードガイド

×

PR

×

PR