Vue.js開発

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

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

私たちがVueの上にNuxtを構築することを選択した理由は以下のとおりです。

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

NuxtとVue

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

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

自動インポート

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

Vue Router

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

Nuxt 2 / Vue 2との違い

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

• パフォーマンスの向上
• Composition API
• TypeScriptのサポート

高速レンダリング

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

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

バンドルサイズの縮小

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

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

Composition API

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

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

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

<script>定義でsetupキーワードと共に使用すると、上記のコンポーネントはComposition APIとNuxt 3の自動インポートされたリアクティビティAPIで書き直されます。

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

Nuxtの目標は、Composition APIを中心とした優れた開発エクスペリエンスを提供することです。

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

TypeScriptのサポート

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