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


関連記事

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

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

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

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

フォロー

blog-page_side_responsive

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930  

アプリ情報

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