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

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに6 おすすめ書籍 はじめに 久し ...

Go言語

Go WebAssemblyでPromiseを使って非同期化してみた

1 はじめに2 Go WebAssemblyで非同期化のコード3 Promise化する4 おまけ5 さいごに6 おすすめ書籍 はじめに 先日WebAssemblyに入門して、実際に以下のチュートリアル ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

フォロー

blog-page_side_responsive

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

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