Nuxt は Vue 3 を統合しており、これは Nuxt ユーザーに新しいパターンを可能にする Vue の新しいメジャーリリースです。

Nuxt は常にフロントエンドフレームワークとして Vue を使用してきました。

私たちが Nuxt を Vue の上に構築することを選んだ理由は以下の通りです：

• データの変更がインターフェースの変更を自動的に引き起こす Vue のリアクティビティモデル。
• HTML をウェブの共通言語として保持しつつ、コンポーネントベースのテンプレートを使用することで、インターフェースを一貫性を保ちながらも強力に保つ直感的なパターンを可能にします。
• 小規模なプロジェクトから大規模なウェブアプリケーションまで、Vue はスケールに応じてパフォーマンスを維持し、アプリケーションがユーザーに価値を提供し続けることを保証します。

Nuxt と Vue

シングルファイルコンポーネント

Vue のシングルファイルコンポーネント（SFC または *.vue ファイル）は、Vue コンポーネントのマークアップ (<template>)、ロジック (<script>)、スタイリング (<style>) をカプセル化します。Nuxt は Hot Module Replacement を使用して、SFC に対してゼロコンフィグの体験を提供し、シームレスな開発者体験を実現します。

自動インポート

Nuxt プロジェクトの components/ ディレクトリで作成されたすべての Vue コンポーネントは、インポートすることなくプロジェクト内で利用可能になります。コンポーネントがどこにも使用されていない場合、プロダクションコードには含まれません。

Vue Router

ほとんどのアプリケーションは複数のページとそれらをナビゲートする方法を必要とします。これを ルーティング と呼びます。Nuxt は pages/ ディレクトリと命名規則を使用して、公式の Vue Router ライブラリ を使用してファイルにマッピングされたルートを直接作成します。

Nuxt 2 / Vue 2 との違い

Nuxt 3+ は Vue 3 に基づいています。新しいメジャーな Vue バージョンは、Nuxt が活用するいくつかの変更を導入しています：

• より良いパフォーマンス
• Composition API
• TypeScript サポート

より速いレンダリング

Vue の仮想 DOM (VDOM) はゼロから書き直され、より良いレンダリングパフォーマンスを可能にします。さらに、コンパイルされたシングルファイルコンポーネントを使用する場合、Vue コンパイラはビルド時に静的および動的マークアップを分離することでさらに最適化できます。

これにより、初回レンダリング（コンポーネント作成）と更新がより速くなり、メモリ使用量が減少します。Nuxt 3 では、より速いサーバーサイドレンダリングも可能になります。

より小さなバンドル

Vue 3 と Nuxt 3 では、バンドルサイズの削減に重点が置かれています。バージョン 3 では、テンプレートディレクティブや組み込みコンポーネントを含む Vue の機能のほとんどがツリーシェイク可能です。使用しない場合、プロダクションバンドルには含まれません。

このようにして、最小限の Vue 3 アプリケーションは 12 kb gzipped に削減できます。

Composition API

Vue 2 では、コンポーネントにデータとロジックを提供する唯一の方法は Options API を通じてであり、data や methods のような事前定義されたプロパティを使用してテンプレートにデータとメソッドを返すことができます：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}

Vue 3 で導入された Composition API は Options API の代替ではありませんが、アプリケーション全体でのロジックの再利用をより良くし、複雑なコンポーネントで関心ごとにコードをグループ化するより自然な方法を提供します。

<script> 定義で setup キーワードを使用して、上記のコンポーネントを Composition API と Nuxt 3 の自動インポートされたリアクティビティ API を使用して書き直したものがこちらです：

const count = ref(0)
const increment = () => count.value++

Nuxt の目標は、Composition API を中心に優れた開発者体験を提供することです。

• Vue と Nuxt の 組み込みコンポーザブル から自動インポートされた リアクティビティ関数 を使用します。
• composables/ ディレクトリ に自動インポートされる再利用可能な関数を自分で書きます。

TypeScript サポート

Vue 3 と Nuxt 3+ はどちらも TypeScript で書かれています。完全に型付けされたコードベースはミスを防ぎ、API の使用を文書化します。これにより、アプリケーションを TypeScript で書く必要はありません。Nuxt 3 では、ファイル名を .js から .ts に変更するか、コンポーネントに <script setup lang="ts"> を追加することでオプトインできます。