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


関連記事

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

フォロー

blog-page_side_responsive

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

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