---

ということで、ついにNuxt.jsに手を出そうというお話です。
前にもいいましたが、Nuxt.jsで一般的な、ふつうのHTMLサイトっぽいもの･･････つまり静的サイトを作るというのが目標ですね。

静的サイト、ということは動的な機構、つまりログイン機能だったりユーザーごとのタイムラインなどを用いない簡素なサイトなことを指すんですけど、これをNuxt.jsで書くメリットとしてはコードに秩序をもたらすことができるという点に尽きますね。
とにかくScoped CSSが強力すぎる。これを使わないと、ぼくの管理能力だとまじで煩雑になります･･････。あと名前の衝突とかも気にしなきゃいけないしね･･････。
あと単純にコンポーネント化が強い。特に今回のような、仮のデザインでごりごり開発だけ進めたいみたいな場合、骨組みの部分を調整したらサイトのデザインをまるまる変えることができる、みたいなのがやりやすくなります。
これが通常のHTMLだと、例えば急遽子ページのデザインを変えなくては･･････みたいになった時、結構いろいろ手を加えないといけないファイルが発生したりしがちなんですよね。そのへんを全部親ファイルとしてまとめたいと。そういうわけですね。



ちなみに、Nuxt.jsってのはVue.jsのライブラリみたいなもので、より便利に使いやすくしましたよーみたいなやつですね。
っていうことで早速導入したいと思うのです。



インストールは結構難儀したので説明を省きます。brewを再インストールしたりなんだりしてぐちゃぐちゃだったので･･････。
ただ、最終的にnuxt自体はNuxtのドキュメントに書いてある通りに、雑にインストールしたらカレントフォルダにNuxtのパッケージがダウンロードされるって感じです。
Laravelと同じフォルダに置くかどうかって問題ですが、僕は含めましたけどどっちでもよさそうな感じしますね。特に今回の例みたく、APIでサーバーと通信しなくても完成するようなプロジェクトだったら余計に。まあ普通は分けるんでしょうけど、僕はLaravelのプロジェクトファイルに含めることにしました。


文法とかはVue.jsと一緒だと思うので、その他で異なるお作法でなんか見つけたら日記にしてメモ書きしようかなみたいな感じなんですが、まずページを作ったときにルーティングどうなってるんだろうとは思うわけです。
んで、ドキュメントを見てみたら･･････





えっ･･････クソ楽では。



とはいえ、アクセスしてほしくないルーティングとかどう対処するんだろうって問題はあります。どうするんだろう。軽く調べた限りでは、諦めるしかなさそうだが･･････。
まあ、通常の使用で変なURLにアクセスされたところでページの表示が崩れるだけって取れないこともないけど･･････。
もしかすると、後述するバリデーションをfalseとかにしたら404を返せるので、それを使えってことなのかな。子コンポーネントから読み込まれた際にどうなるのかがわからないんですけど。



と思ったら、サンプルコードに正解がありました。componentsフォルダ･･････つまりpages外のフォルダを参照すればルーティング適用外になるみたいですね。なるほどなるほど。すっきりした。




あと、動的ルーティングに関してはこんな感じで指定するようです。なるほど。
バリデーションに関しては、vueファイル内に直接書き込むようです。わかりやすくていいですね。




ネストされたルート、これがちょっとめんどくさそうですね。たとえばusersというディレクトリを使いたかったら、users.vueを作れ、ってことらしい。ちょっとこれはディレクトリ構造が煩雑になりそうなにおいはします･･････。まあ仕方ないのかな･･････。



このへんの、ルーティングのお作法を頭に入れておけばあとはVue.jsと似たような感じで開発が進められそうですね。んじゃちょっと開発進めますかね。