kindle本「Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク」のまとめ。
点数
55点
感想
ちょっとひどい内容だった。
最初から読み進めても理解することができない構成になっていた。
著者が書きたいことを書いて終わり、という感じ。
Nuxt.jsとは
Nuxt.jsはユニバーサルアプリを構築するためのフレームワークである。
ユニバーサルアプリとは、クライアントサイトとサーバサイドの両方で実行できるJavaScriptアプリケーションであり、簡単に言うと、同じJavaScriptコードでクライアントサイドのSPAとサーバサイドのサーバサードレンダリングを実現するものである。
Nuxt.jsにはデフォルトでVuexやvue-routerが組み込まれている。
Nuxt.jsのはじめ方
npmの場合
- npm -y init
- npm install nuxt
- mkdir pages
- touch pages/index.vue
<template><h1>Halle Nuxt</h1></template> - npx nuxt devで実行するとhttp://localhost:3000で確認可能
※ package.jsonのscriptに"dev": "nuxt dev",を追加するとnpm run devで実行可能。
create-nuxt-appの場合
- npm -y init
- npm install --save-dev create-nuxt-app
- npx create-nuxt-app アプリ名
- cd アプリ名
- npm run devで実行するとhttp://localhost:3000で確認可能
nuxtコマンド
npx nuxt (npm run dev)
開発モードでサーバを起動。
npx nuxt build (npm run build)
Webpackによるjsとcssのビルド。
結果は.nuxt/dist/ディレクトリに出力される。
npx nuxt start (npm run start)
プロダクションモードでサーバを起動。
buildの後に実行する必要がある。
npx nuxt generate (npm run generate)
静的ファイル生成。
結果はdistディレクトリに出力される。
pagesディレクトリとルーティング
pagesディレクトリ内の1つの.vueファイルが1つのページとなる。
page内のディレクトリ・ファイルは、vue-routerでのルーティングが自動的に生成される。
ex) pages/hoge/index.vueは/hogeのルーティングが生成される。
※ ルーティングのコードは.nuxt/router.jsに生成される。
ディレクトリ名や.vueファイル名の先頭を_(アンダースコア)にすると、パラメータ付きの動的なルーティングとなる。
ex) pages/hoge/_id.vue
<template>
<h1>id: {{ $route.params.id }}</h1>
</template>※ .eslintrc.jsのparserOptionsにrequireConfigFile: false,がないとビルドエラーとなった。(21.6.29)
storeディレクトリ
VuexのStoreを配置する。Vuexが不要な場合は使用しない。
Vuexの使用はクラシックモードとモジュールモードがある。
- クラシックモード
store/index.jsでVuexを読み込み、作成したstoreをexportする。 - モジュールモード
ファイル毎にstate, mutations, actionsをexportする。
Nuxt独自の属性
Nuxt.jsでは.vueファイルに独自の拡張が加えられている。
asyncData
コンポーネントにデータをセットする前に非同期処理を行うためのフック。
asyncDataで取得したデータはdataにマージされる。
コンポーネントロード時に毎回実行される。SSR時にも実行される。
実装は「Promiseを返す」「async/awaitを使用する」「第2引数にコールバックを渡す」のいずれかである必要がある。
fetch
ページがレンダリングされる前にStoreにデータをセットするためのフック。
コンポーネントロード時に毎回実行される。
head
headタグを設定するための属性。
scrollToTOP
trueの場合、ページ遷移時にトップまでスクロールする。デフォルトはfalse。
validate
動的ルーティングのバリデーションメソッドを定義することができる。
エラー時はエラーページが表示される。
オブジェクトが引数として渡される。オブジェクトのキーはparams, query, storeである。