初めてのNuxt.jsでサイト書き直してみた。

2020年12月11日

10年ぶり近くでサーバー構築もしたし久しぶりにフロントもやってみますかと
見た目は~~そこまで~~全く変えずに中身だけNuxt.jsで作り替えてみたので備忘録。

Nuxt.jsを選んだのは去年大丸の常設展示用にアプリケーションとしてVue.jsで書いた事があったってのとwebがメインの友人（special thanks!! @cyocun）に聞いてみたらNuxtいいよって話だったのでちょと触ってみたら自分がやるくらいの規模（数十ページで一人で完結）のフレームワークとして丁度いい感じだったのでこれで行ってみますかという感じ。versionはこんな。

Nuxt.js @ v2.14.7
node v14.15.1
yarn v1.1.0

とりあえず早速公式読んでスクラッチでの書き方。
nuxtjs install howto

$ mkdir 
$ cd 
$ touch package.json

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

$ yarn add nuxt
$ mkdir pages
$ touch pages/index.vue



$ yarn dev

http://localhost:3000/

簡単！
んでもうちょっとちゃんとサイト作り始めるときはこっちで一発。

$ yarn create nuxt-app

質問色々聞かれるので答えたらもりもりmodule入った状態で始められる。
nuxt.config.js にデフォで読み込むCSSとかかける。

export default {
  css: [
    '@/assets/css/common.scss'
  ],
}

今回の構成としてはtopページにindex一覧があって、各detailページとprofileがあるくらい。ページ追加はjsonに足せば勝手に一覧追加と詳細ページができるみたいなのを想定。

top
 ├ profile
 └ work
  　└ ...

超シンプル〜
現状work以下のページが40くらいあったのでこれを共通のテンプレート1枚で持てば、projectのディレクトリは必要最低限だとこんな感じ。

root
 ├ assets
 │　├ css/
 │　└ data.json
 ├ components
 │　├ Header.vue
 │　└ Footer.vue
 ├ layouts
 │　├ default.vue
 │　└ error.vue
 ├ pages
 │　├ index.vue
 │　├ profile.vue
 │　└ _work
 │　　└ _id.vue
 └ static
  　└ images/works/...

layoutもちゃんと分けて書いてたんだけど結局pageのvueに書くのとそんなに変わらない&ファイルの行き来が減るのでlayoutナシの方が楽だったw

これまで書いてたworks以下の詳細ページの内容をassets以下のdata.jsonにがさっと1ファイルにする。
重いかな？と思いつつ試しに1ファイルにざっとダミー流し込んでみたら38KBとかだったのでまー許容量でしょ、と。
1記事のdataはこんな感じ。で、これが現状40個くらいある。

{
  "id": "nfonline03",
  "title": "NF ONLINE #03",
  "thumb": "0.jpg",
  "date": "2020.10",
  "text": "2015年より定期的に開催されている NF のオンライン配信イベント第3弾。",
  "links": [
    { "WEB": "https://ab.com/" },
    { "LINK": "https://ab.com" }
  ],
  "media": [
    "//www.youtube.com/embed/xxxx",
    "//player.vimeo.com/video/xxx",
    "1.jpg",
    "10.gif"
  ]
}

imagesディレクトリ以下は以前からidでディレクトリ名切ってあるので飛んできたURLを pages/_work/_id.vue の asyncData でちょっとだけルーティングしてあげれば良さそう。
具体的には前回のサイトがworkディレクトリ無しの直下に詳細ページディレクトリがぶら下がってた状態だったので以下のようなルーティング処理を噛ませば行けそう。

1.AAAというページが存在するかチェック。
ab.com/work/AAA → ok ページ表示

2.前回のURLで飛んできた場合は正しいページへリダイレクト
ab.com/AAA → ab.com/work/AAA → 1へ

3.該当しないページは404
ab.com/xxx → 404 error表示

async function dataCheck(id, dirname, json) {
  let obj = {
    is404: true,
    isRedirect: false,
    redirectPath: '',
    index: -1,
  };
  if //諸々条件分岐
  return obj;
}
async asyncData({ params, redirect, error })
{
  const json = await import(`@/assets/data.json`);
  const dirname = params.work;
  const id = params.id;
  let check = await dataCheck(id,dirname,json);

  if (check.is404) return error({ errorCode: 404 });
  if (check.isRedirect) return redirect(302, check.redirectPath);

  let data = json.post[check.index];
  // detail page
  return { dirname, id, data };
}

後で気付いたんだけどこの方法だとSSG(Static Site Generation) でgenerateした時に動的ルーティングのページでasyncDataが走らない？ぽくて何でやーって悩んでたんだけど、空のdefaultLayoutだけが表示されるのでもうdefaultLayoutにasyncData書いてやれとリダイレクト処理移したら動いた。どの階層のasyncDataが動いてるのかが謎w
この辺りちゃんと調べずにザクザク書いたのでお仕事の時にでもまた改めて。←

あとは諸々。

Google Analytics 入れる
https://google-analytics.nuxtjs.org/setup