Nuxt.jsで作るPWAプロジェクトサンプル

Vue.jsベースのJavaScriptのフレームワークNuxt.js（ナクスト）で作成したPWA（Progressive Web Apps）プロジェクトサンプルのご紹介です。

Nuxt.jsで作るPWAプロジェクトサンプル

Nuxt.js(SPA|PWA)で作られた静止画/動画のギャラリーページで、コンテンツの管理は外部jsonファイルで行っています。

※ プロジェクトのサンプルはページ後半

仮コンテンツを入れてgenerate後、サーバーへアップしたページ例

Gallery

PWA（Progressive Web Apps）確認方法

Nuxt.jsで作るPWAプロジェクトサンプル

GitHub上のプロジェクトサンプル

t-nashi/Nuxt.js_SPA-PWA_Gallery

Nuxt.js_SPA-PWA_Galleryのjsonファイル作成補助

プロジェクトサンプルとサンプル中のjsonデータを作成しているスプレッドシートのURLです。

GitHub上の「Nuxt.js_SPA-PWA_Gallery」をクローン or ダウンロード後、コマンドプロンプト(Windows) or ターミナル(macOS)で必要コマンドを実行すれば上図のような画面が確認可能（なハズ。。）

▼ npm必要コマンド ※プロジェクトディレクトリにて実行
──
# 必要なパッケージをローカルプロジェクトへインストール
$ npm install

# プロジェクトを立ち上げる
$ npm run dev

# Webサーバー上へアップロードするファイル一式を準備（dist）
$ npm run generate

# generateコマンドで生成されたファイルからプロジェクトを立ち上げる
$ npm run start

※ 要Node・npm実行環境

Nuxt.js・PWA関連で何か良いきっかけになれれば幸いですmm