Vue.js 開発

NuxtはVue.jsを使用し、コンポーネントの自動インポート、ファイルベースのルーティング、SSRフレンドリーな使用のためのコンポーザブルなどの機能を追加します。

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

Nuxtを使用するためにVueの詳細な知識は必要ありませんが、ドキュメントを読み、いくつかの例を試すことをお勧めします。vuejs.org.

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

NuxtをVueの上に構築することを選んだ理由は次のとおりです。

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

NuxtとVue

単一ファイルコンポーネント

Vueの単一ファイルコンポーネント(SFCまたは*.vueファイル)は、Vueコンポーネントのマークアップ(<template>)、ロジック(<script>)、およびスタイル(<style>)をカプセル化します。Nuxtは、SFCにゼロコンフィグのエクスペリエンスを提供します。ホットモジュールリプレースメントシームレスな開発体験を提供します。

自動インポート

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

Docs > 4 X > Guide > Concepts > Auto Imports で詳細をご覧ください。

Vueルーター

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

Docs > 4 X > Getting Started > Routingで詳細をご覧ください。
Docs > 4 X > Examples > Features > Auto Imports でライブサンプルを読み、編集する。

Nuxt 2 / Vue 2との違い

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

  • パフォーマンスの向上
  • コンポジションAPI
  • TypeScript サポート

より高速なレンダリング

Vue Virtual DOM (VDOM) はゼロから書き直され、レンダリングパフォーマンスが向上しました。さらに、コンパイルされた単一ファイルコンポーネントを扱う場合、Vueコンパイラは静的マークアップと動的マークアップを分離することで、ビルド時にそれらをさらに最適化できます。

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

より小さなバンドル

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

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

コンポジションAPI

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

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

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

<script>定義のsetupキーワードとNuxt 3の自動インポートされたリアクティビティAPIを使用して書き直された上記のコンポーネントを次に示します。

components/Counter.vue
<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

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

TypeScriptサポート

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

NuxtのTypeScriptに関する詳細を読む