「Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク」の感想・備忘録

kindle本「Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク」のまとめ。

点数

55点

感想

ちょっとひどい内容だった。
最初から読み進めても理解することができない構成になっていた。
著者が書きたいことを書いて終わり、という感じ。

Nuxt.jsとは

Nuxt.jsはユニバーサルアプリを構築するためのフレームワークである。
ユニバーサルアプリとは、クライアントサイトとサーバサイドの両方で実行できるJavaScriptアプリケーションであり、簡単に言うと、同じJavaScriptコードでクライアントサイドのSPAとサーバサイドのサーバサードレンダリングを実現するものである。

Nuxt.jsにはデフォルトでVuexやvue-routerが組み込まれている。

Nuxt.jsのはじめ方

npmの場合

  1. npm -y init
  2. npm install nuxt
  3. mkdir pages
  4. touch pages/index.vue
    <template>
    <h1>Halle Nuxt</h1>
    </template>
  5. npx nuxt devで実行するとhttp://localhost:3000で確認可能
    ※ package.jsonのscriptに"dev": "nuxt dev",を追加するとnpm run devで実行可能。

create-nuxt-appの場合

  1. npm -y init
  2. npm install --save-dev create-nuxt-app
  3. npx create-nuxt-app アプリ名
  4. cd アプリ名
  5. 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である。


【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。