【Nuxt.js】入門から応用まで！【Firebase】と連携しWebアプリをつくってみよう【SPA】

『Nuxt.js』は、

近年人気のJSフレームワーク『Vue.js』を拡張し、

さらに便利にWebサイト、Webシステムを使えるようにしたフレームワークです。

複数のモード切替と、

ライブラリを使用したモードなど様々な要求に対応できる機能を持っています。

・SPA (シングルページアプリケーション)

・SSR (サーバーサイドレンダリング)

・SSG (静的サイト生成)

・PWA (プログレッシブウェブアプリケーション)

ただでさえ『Vue.js』が多数の機能を持つのに加え、

『Nuxt.js』専用の機能もたっぷり増えているため、

『結局なにをどうすればいいのさ・・・』となってしまいがちです。

そんな実体験もありこの講座では、

はじめは『Nuxt.js』で追加されている機能に絞り、

少しずつハンズオンで確かめながら、

『できる！』と思えるように時間をかけて進めるような構成にしています。

初心者の視点で、

ちょっとでも『ん？』と思う箇所はできるだけ掘り下げ、

スッキリした状態で先へ進めるように解説しています。

簡単でもいいのでできるだけ手を動かしてアプリをつくりつつ、

知識だけでなく実際に使えるようになるような構成を意識しております。

2022年1月現在、

Nuxt.js3がパブリックベータ版でまだマニュアルが出揃っていない事もあり、

まずは『Nuxt.js2』でレクチャーし、

『Nuxt.js3』正式リリース後に追加していく予定になっています。

また、

講座リリース時点ではSPAアプリをFirebaseにアップするところまでを解説しており、

他のモードについては受講いただいた方のアンケートなども参考に、

講座内容を拡充していく予定としています。

(SSG, SSR, PWAなど)

■講座内のサンプル

簡易読書管理アプリ(GoogleBooksAPI+Vuetify+Firebase)

■講座で扱っている内容

『Nuxt.js』

・create-nuxt-app

・ライフサイクル(asyncData, fetch)

・ context

・オートルーティング

・オートインポート

・layouts/middleware/plugins/modules/assets

・VisualStudioCode拡張機能

・GoogleChrome拡張機能

・SPA

『Firebase』

・CloudFireStore

・Authentication

・Hosting

■ 今後追加予定

SSR

SSG

PWA

Nuxt.js3対応

CompositionAPI対応

■収録時のバージョン

・セクション2～4

Nuxt.js 2.15.7

Vuetify 2.3.10

Node.js 12.16.2

・セクション4

Firebase (JS SDK) 9.6.2