Nuxt3 入門
ushironoko
ushironoko
{
sns: @ushiro_noko,
jobs: {
main: STORES,
sub: NuxtLabs Japan
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/6460078/30229874.jpeg)
今日話すこと
- Nuxt3のおさらい
- Nuxt3のはじめかた
- Nuxt3をもっと知る
Nuxt3 おさらい
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10224993/スクリーンショット_2023-02-15_23.18.30.png)
よりモダンになったVue.jsフレームワーク
開発環境
- Vite or Webpack5
- Zero config TypeScript
- Auto-Imports
- Generate d.ts
- Vitest or Jest
- Typed API Routes
パフォーマンス
- Route Rules
- .output
- any Hosting Providers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10225158/スクリーンショット_2023-02-16_0.13.55.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10225161/スクリーンショット_2023-02-16_0.14.01.png)
New Document
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10225184/スクリーンショット_2023-02-16_0.19.28.png)
https://nuxt.com/docs
3.0 Release ~
Current Version
- 64個のbug fix
- 23個の機能追加
- 6個のパフォーマンス改善
- 実験的なアイランドアーキテクチャのサポート(3.1)
- NuxtDevToolsなどのDX強化
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10225274/スクリーンショット_2023-02-16_0.42.26.png)
Nuxt3 でアイランドアーキテクチャ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230331/スクリーンショット_2023-02-17_16.54.45.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230332/スクリーンショット_2023-02-17_16.55.28.png)
- .island.vueで作るとできる
- 用途はまだわからない
- 続編のissueが立っている
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230368/スクリーンショット_2023-02-17_17.14.09.png)
Nuxt3 でISG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230352/スクリーンショット_2023-02-17_17.07.41.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230353/スクリーンショット_2023-02-17_17.08.11.png)
- ルートごとにレンダリング戦略を指定
- NetlifyならISGをサポート(Vercelは対応中)
- 設定がtureならISGビルダーへ、そうじゃないならlambda(AWS)
時代に追いついてきた
How
To
Use Nuxt3
最速で始めるNuxt3
- StackBlitz
- Codesandbox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10226974/スクリーンショット_2023-02-16_16.49.14.png)
自分で作るのも良いが
nuxt.new
Nuxtプロジェクトやツールを作る時のスターターテンプレート集
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227013/スクリーンショット_2023-02-16_16.59.50.png)
nuxt.new
nuxt/content向けのデザインテンプレート
ポチっとするとすぐに始められる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227029/スクリーンショット_2023-02-16_17.08.01.png)
普通に始めるNuxt3
- npx nuxi init project-name
- cd project-name
- pnpm i && pnpm dev
- vscode .
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227179/スクリーンショット_2023-02-16_18.28.06.png)
以上!
いつものやつ
とりあえず動かしたい人
https://github.com/ushironoko/next-tutorial-on-nuxt-3
NextチュートリアルをNuxt3でやる
API Routes
- server/api に定義
- defineEventHandler
- 自動でapiの型を生成
- useFetchで補完
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227490/スクリーンショット_2023-02-16_19.53.29.png)
API Routes
-
server/api に定義
- defineEventHandler
- 自動でapiの型を生成
- useFetchで補完
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227626/スクリーンショット_2023-02-16_20.31.51.png)
API Routes
-
server/api に定義
- defineEventHandler
- 自動でapiの型を生成
- useFetchで補完
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227646/スクリーンショット_2023-02-16_20.37.36.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227804/スクリーンショット_2023-02-16_21.12.32.png)
組み込みコンポーネント
- Headコンポーネント
- Linkコンポーネント
- Metaコンポーネント
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10227662/スクリーンショット_2023-02-16_20.42.05.png)
useHead(旧useMeta)なしで
metaの設定が可能に
もっと知りたいNuxt3
composables 編
Nuxt2 composables
- useStore
- useAsync
- useContext
- useFetch
- useMeta
- useRoute
- useRouter
- useStatic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230199/スクリーンショット_2023-02-17_15.05.42.png)
Nuxt3
composables
- useAppConfig
- useAsyncData
- useCookie
- useError
- useFetch
- useHead
- useHydration
- useLazyAsyncData
- useStorage
- useLazyFetch
- useNuxtApp
- useNuxtData
- useRequestEvent
- useRequestHeaders
- useRoute
- useRouter
- useRuntimeConfig
- useState
多すぎ!
何に使うかわからんのもある
- useAppConfig
- useAsyncData
- useCookie
- useError
- useFetch
- useHead
- useHydration
- useLazyAsyncData
- useStorage
- useLazyFetch
- useNuxtApp
- useNuxtData
- useRequestEvent
- useRequestHeaders
- useRoute
- useRouter
- useRuntimeConfig
- useState
ここら辺の話をします
Nuxt3
composables
useAppConfig
例)
- tailwind.config.mjsを定義
- app.config.tsで登録
- useAppConfigで取り出し
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228125/スクリーンショット_2023-02-16_22.51.10.png)
server/clientどっちでもアクセス可
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228131/スクリーンショット_2023-02-16_22.55.31.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228134/スクリーンショット_2023-02-16_22.56.54.png)
useAsyncData
非同期データの管理に使える
返り値をピックしたり、直接加工することも可能
default にファクトリ関数を渡すとデフォルト値を設定できる
デフォルトでAPIレスポンスはキャッシュされる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228523/スクリーンショット_2023-02-17_0.31.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228560/スクリーンショット_2023-02-17_0.39.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230002/スクリーンショット_2023-02-17_11.31.20.png)
useAsyncData
point
- fetch処理専用APIではない
- 非同期データを賢くキャッシュしたり加工したり便利に扱うAPI
- 子コンポネでも使える
- toplevel awaitで親は自動でサスペンドする
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230022/スクリーンショット_2023-02-17_11.47.03.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230044/スクリーンショット_2023-02-17_12.07.41.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230045/スクリーンショット_2023-02-17_12.08.35.png)
useLazyAsyncData
非同期データの管理に使える
ページナビゲーションをブロックしない(@nuxtjs/composition-api のuseAsyncと同じ挙動)
useAsyncDataに { lazy: true }
を渡しても同じ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10228707/スクリーンショット_2023-02-17_1.09.11.png)
useFetch
useAsyncData + $fetchのラッパー
$fetchはユニバーサルに動作するfetchライブラリofetchのAPI
API Routesの定義から型を生成して補完される
これはfetch専用
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230067/スクリーンショット_2023-02-17_12.35.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230068/スクリーンショット_2023-02-17_12.36.30.png)
useLazyFetch
useAsyncData + $fetchのラッパー
useAsyncData同様ナビゲーションをブロックしない
useFetchに { lazy: true }
を渡しても同じ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230071/スクリーンショット_2023-02-17_12.38.09.png)
useNuxtData
useFetchやuseAsyncDataが
キャッシュしている値を取り出す
取り出すにはキーを渡す必要がある
キャッシュはリアクティブな値なので直接書き換えられる(リクエストでfailしたら前の
値を入れ直す等で使える)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230185/スクリーンショット_2023-02-17_14.57.07.png)
refreshNuxtData
useFetchやuseAsyncDataの
キャッシュしている値を
リフレッシュする
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230185/スクリーンショット_2023-02-17_14.57.07.png)
useCookie
リアクティブにcookieを読み出し/書き込みできる
secure/domain/httpOnlyなど設定できる
watchオプションをfalseにすると値を更新してもcookieへ書き込まれない
localStorageなど使いたい場合は@vueuse/useStorageで
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230101/スクリーンショット_2023-02-17_13.06.11.png)
useStorage
サーバーストレージとして
unjs/unstorageが組み込まれている
apiでインメモリキャッシュやストレージプロバイダーに値を書き込んだり読み出したりできる
dev/prodの切り替えも可能
https://nuxt.com/docs/guide/directory-structure/server#server-storage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230111/スクリーンショット_2023-02-17_13.13.47.png)
useNuxtApp
サーバー/クライアントで共有しているNuxtのコンテキストにアクセスできる
useContextやuseStoreはこれに置き換えられる
provideで値を登録したりランタイムフックに登録したりできる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230126/スクリーンショット_2023-02-17_13.25.49.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230167/スクリーンショット_2023-02-17_14.39.35.png)
useRuntimeConfig
nuxt.config.tsで設定したenvにアクセスできる
privateなenvはサーバーでのみ参照可能
publicに登録したものはクライアントでも使える
.env ファイルがrootにあると自動で読み込むため設定は不要
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230203/スクリーンショット_2023-02-17_15.08.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230207/スクリーンショット_2023-02-17_15.10.03.png)
useState
SSRに最適化されたrefのようなもの
サーバーで実行され、クライアントで参照できる(global stateとして使える)
setup プロパティや script setup の外で使う場合はコールバックの形式にする(しないとshared mutable stateになる)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230213/スクリーンショット_2023-02-17_15.21.11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230215/スクリーンショット_2023-02-17_15.23.55.png)
or
覚えましたね?
もっともっと知りたいNuxt3の機能
- Nuxt Layers
- Nuxt Kit
Nuxt Layers
Nuxtプロジェクトのうち、以下の機能を継承できる
- component
- composables
- pages
- server
- nuxt.config.ts
- app.config.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230233/スクリーンショット_2023-02-17_15.49.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230234/スクリーンショット_2023-02-17_15.50.17.png)
Nuxt Layers
- Gitリポジトリへの公開
- npmへ公開
以下のどちらかでpublicに
公開もできる
レイヤー固有の依存は
dependenciesに定義されて
いれば読み込み側で検知できる
例では
components/AppLayout
を継承した
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230242/スクリーンショット_2023-02-17_15.58.44.png)
Nuxt Kit
Nuxt Moduleの開発やビルドフックの
拡張を簡単にできるAPI
基本的にはdefineNuxtModule
というAPIで定義する
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230272/スクリーンショット_2023-02-17_16.12.47.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230273/スクリーンショット_2023-02-17_16.13.00.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230274/スクリーンショット_2023-02-17_16.12.31.png)
@nuxt/kitからは便利な関数が
exportされている
isNuxt2/resolvePath/requireModule/
getNuxtVersion/addVitePlugin/ etc...
Nuxt Kit
自作する人は既存のモジュールを参考に
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230278/スクリーンショット_2023-02-17_16.19.11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230280/スクリーンショット_2023-02-17_16.20.36.png)
Nuxt3入門まとめ
- Island ArchitectureやISG/ISRは一部サポート済み
- しゅっと始めるなら https://nuxt.new
- 便利なcomposablesいっぱい
- Nuxt Layer & Kitでモジュール開発
補足情報
- 迷ったらelk-zoneをみよう
- NuxtLabsが開発しているマストドンクライアント
- Nuxt3を一番使い倒しているパブリックリポジトリ
- 新情報も意外と手に入る
- script setupでジェネリクス定義できるやつ等
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1112029/images/10230305/スクリーンショット_2023-02-17_16.27.01.png)
おわり
Nuxt3 入門 令和 最新
By ushironoko
Nuxt3 入門 令和 最新
v-tokyo#16のLT資料です。
- 2,058