FrontEnd

Nuxt 3(ベータ)の新機能を紹介

投稿日:

はじめに

先日パブリックベータに移行したNuxt 3では、コードの軽量化、高速化やTypeScriptサポートなど様々な変更や新機能が盛り込まれているようです。

今回はそんなNuxt 3の新機能、変更点について紹介します。

Nuxt 3の特徴

公式サイトで挙げられている特徴(対応予定を含む)は下記の通りです。

  • 最大で75倍の軽量化
  • Nitro Engineによる高速化
  • ISG(インクリメンタル・スタティック・ジェネレーション)などの高度なモードへの対応予定
  • ナビゲーションの前後を問わず、どのコンポーネントでもデータを取得可
  • Composition APIのネイティブサポート
  • Nuxt CLI登場
  • Nuxt Devtools登場予定
  • Webpack 5に対応
  • Vitaに対応
  • Vue 3のネイティブサポート
  • TypeScriptのネイティブサポート

新しいサーバエンジン(Nitro Engine)が登場

Nuxtの新しいサーバエンジンとしてNitoro Engineが登場しました。これにより、大幅な軽量化(公式曰く、最大75倍)と高速化が実現されているようです。

さらに、Nitro EngineによりNuxt内部でのAPIの作成が行えるようになりました。これについては後ほど紹介します。

Vue 3&Composition APIのネイティブサポート

Nuxt 2でもパッケージを追加することで対応させることができましたが、Nuxt 3からは標準で使用できるようになりました。

TypeScriptのネイティブサポート

Nuxt 2でTypeScriptを使う場合、tsconfig等を自分でセットアップする必要がありましたが、Nuxt 3からはNuxt CLIでアプリケーションを作成すると、TypeScriptがそのまま利用できます。

Nuxt 3のディレクトリ階層

公式サイトにおけるNuxt 3のディレクトリ階層は下記のようになっています。

  • .nuxt(Nuxtが生成するファイル)
  • .output(本番アプリケーションのビルド先)
  • assets(ビルドツールで処理されるアセット。SASS、Fontなど)
  • components(Vueコンポーネント)
  • composables(Stateを管理するファイル。自動インポートされる)
  • layouts(レイアウト)
  • nod_modules
  • pages(各ページ)
  • plugins(プラグインファイル。自動インポートされる)
  • public(faviconなどの静的ファイルなど)
  • server(APIなどのバックエンドロジック)
  • .gitignore
  • app.vue
  • nuxt.config.ts
  • package.json
  • tsconfig.json

Nuxt 3で追加されたメソッド

Nuxt 3では下記の3つのメソッドが追加されました。これらのメソッドはsetup関数内か、Lifecycle Hooks内で動作します。

  • useAsyncData
  • useFetch
  • useState

useAsyncData

非同期に解決されるデータにアクセスできます。基本的にはNuxt内部で作成したAPIを呼ぶために使用されます。

引数の内容は下記の通りです。

  • key(データ取得がリクエスト間で適切に重複しないようにするための固有キー)
  • fn(値を返す非同期関数)
  • options
    • lazy(ナビゲーションをブロックするのではなく、ルートをロードした後に非同期関数を解決するかどうか。デフォルトはfalse)
    • default(非同期関数が解決する前に、データのデフォルト値を設定するファクトリ関数)
    • server(サーバーサイドでデータを取得するかどうか。デフォルトはtrue)
    • transform(解決後のfnの結果を変更するために使用できる関数)
    • pick(fnの結果から、この配列の指定されたキーのみを取り出す)

戻り値の内容は下記のとおりです。

  • data(非同期関数の結果)
  • pending(データがまだフェッチされているかどうかを示すbool値)
  • refresh(データの更新を強制的に行うために使用できる関数)
  • error(データの取得に失敗した場合に返される)

使用例は下記のとおりです。

useFetch

ページ、コンポーネント、プラグインでは、useFetchを使用して任意のURLからデータをフェッチできます。基本的には外部APIを呼ぶために使用されます。

引数の内容は下記の通りです。

  • url
  • options
    • method(リクエストメソッド)
    • params(クエリパラメータ)
    • baseURL(ベースURL)

戻り値の内容はuseAsyncDataを同じです。

使用例は下記のとおりです。

uesState

Nuxtでは、コンポーネント間でリアクティブでSSRに適した共有ステートを作成するためのuseStateコンポーザブルを提供しています。

これにより、Vuexを使わなくてもStateの管理ができるようになります。

  • key(データ取得がリクエスト間で適切に重複しないようにするためのユニークなキー)
  • init(ステートが開始されていないときに初期値を提供する関数)
  • T

使用例は下記のとおりです。

さいごに

Nuxt 3(ベータ版)での新機能や変更点を紹介しました。軽量化や速度改善に加えて、TypeScriptに対応されたのが良い点だとおもいます。

おすすめ書籍

みんなのVue.js プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

1 はじめに2 セットアップ3 コンポーネントのテスト3.1 Shallow 描画3.2 基本的な例3.3 プロパティを渡す3.4 ユーザーの操作をシミュレーションする3.5 イベントを検証する3.6 ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

フォロー

blog-page_side_responsive

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。