Nuxt について詳しく
Nuxt とは
Nuxt.js（ナクスト・ジェイエス）は、Vue.js をベースとして開発された JavaScript フレームワークです。
Vue.js 自体が JavaScript の View (HTMLファイル) のフレームワークですが、Nuxt.js はその Vue.js ファイルを使ってURLのルーティングや API 処理をはじめとするアプリケーション開発に欠かせない機能の実装を想定した仕様になっており、より開発がしやすくなっています。
Nuxt.jsとは？より
ルーティング
ここではこう定義します。(誤用だったらごめんです)
ルーティング
pagesフォルダのvueファイルがそれぞれseiryofes.comのどのページ、どのURLに対応するかについての設定のこと。
Nuxt では通常、ルーティングはディレクトリ構造から自動的に算出される。
Nuxtで独自のルーティングを追加・拡張するより
例1
pages/index.vue
seiryofes.com
例2
pages/map.vue
seiryofes.com/map
例3
pages/groups/index.vue
seiryofes.com/groups
このように、各フォルダのindex.vueはそのフォルダ内でのトップページのような扱いとなります。
また、seiryofes.com/mapのように子ページを作らないページについては、そのままmap.vueを作ることでスマートにページを連ねることができます。
ただし、フォルダ名の最初にアンダーバー_がついているものは扱いが特殊となります。
例4
pages/groups/_groupId/index.vue
seiryofes.com/groups/testgroup
例5
pages/groups/_groupId/index.vue
seiryofes.com/groups/35r
このように、APIにある団体のIDから自由に決められるようになっています。 （動的ルーティングと言います。）
例6
pages/groups/_groupId/data.vue
seiryofes.com/groups/testgroup/data
残念ながらこの/dataはAdminしか見ることができないのですが、このように、動的ルーティングであっても配下のディレクトリ構造に応じて正しくURLが用意されます。
fallbackについて【工事中】
存在しないURLに飛ぶと404ページを表示するようにしています。
(厳密にいうと違う場合がある。layouts/error.vueとの違いも記述する。
nuxtconfigの解説ページ、fallbackの200と404のくだり、nuxt generateの話など。)
レンダリング・ライフサイクル【工事中】
SPA,SSR,CSR,SSGおよびライフサイクルについて説明する予定。
今は各自検索してもらえると助かります。
AsyncDataに由来するものなど、2023年度の主要なバグの半分程度はこの分野に関連します。
PWA【工事中】
PWA（Progressive Web Apps）プログレッシブウェブアプリは、WebサイトとWebアプリをネイティブアプリのように端末にインストールすることができるアプリ
ネイティブアプリとは？より