Nuxt.jsで静的サイト(universal + generate)を作っているときに、タイトルやディスクリプション、ページのキャッチワード等のクオリティを上げるために、EXCELにひとまとめして管理したい。提案のときにも便利。
なので、EXCELを変換した静的なjsonファイルをいろんな所で使えるようにしておく。
１．Vuexで読み込んで使う。
Nuxt.jsで共通のデーターを使うならVuexが便利。ということで試してみる。
storeを作成
Nuxt.jsは、モジュールモードがお手軽に出来て最高。
store/json.js
import jsonData from '~/assets/json/data.json'
// 状態管理
export const state = () => ({
data: jsonData,
})
// getters
export const getters = {
getAll (state) {
return state.json
},
...
}
動作確認
pages/index.vue
<template>
<pre>{{ jsonAll }}</pre>
</template>
<script>
export default {
asyncData ({ store }) {
jsonAll: store.getters['json/getAll'],
},
...
}
すんなり表示。試しに、head()へ読み込んでgenerateしてみたが、ちゃんとtitleやdescriptionが反映されている。OK。
おまけ
さらに、↓みたいな感じでgetterを増やしていけば、色んな所で活躍できる。Good。
store/json.js
...
// getters
export const getters = {
getAll (state) {
return state.json
},
getPage: (state) => (name) => {
return state.json.filter(el => el.name === name)
},
...
}
２．サーバーサイドでも使いたいと言われた。
routingやsitemap生成とかにも使いたいかも。
ということで、nuxt.config.jsに「fs」を利用して読み込ませてみる。
fsパッケージをインストール
nuxtには「fs」が入っていないのでパッケージをインストール。
npm
npm i fs
JSON.parseとfs.readFileSyncでjson読み込み。＆envに登録。
jsonファイルを読み込みつつ、envに登録することで色んな所で使えるようにする。
nuxt.config.js
const fs = require('fs')
const jsonData = JSON.parse(fs.readFileSync('assets/json/data.json'))
module.exports = {
env: {
jsonData: jsonData,
},
...
}
動作確認
pages/index.vue
<template>
<pre>{{ json }}</pre>
</template>
<script>
export default {
asyncData () {
json: process.env.jsonData
},
...
}
こちらも問題なし。試しにhead()へ読み込んでgenerateしてみたが、ちゃんとtitleやdescriptionが反映されている。
からの〜
env経由でStoreに渡してVuexで扱っても大丈夫。
store/json.js
// 状態管理
export const state = () => ({
data: process.env.jsonData,
})
...
シンプルな内容に収まってとても満足したけど、結局、タイトルとかはjsonで管理しなかった落。
参考：
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする（CSS編）
- nuxt.js(v2)でIE11対応をする（JS編）
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
- Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!
- nuxt.js(v2)へBuefyを入れた。全部入れでOKだった…嬉しい。