schedule2020-09-02

Nuxt.js PWA

Nuxt.jsを使ってPWAを作っていきます。 nuxt-communityからtypescriptのスタートテンプレートとPWAのモジュールが出ています。今回はこれらを使ってPWA PWAを体験してみます。

環境

Windows 10 Home x64
Node.js 12.18.3
npm 6.14.6
yarn 1.22.5

Nuxt.jsをインストールする

Nuxtのプロジェクトを作ります。 TypeScriptを使ってみたいので初期設定済みのtypescript-templateを使いました。プロジェクトの作成にはVue CLIを使うと簡単です。

プロジェクト名はnuxt-pwaとします。

$ yarn create nuxt-app nuxt-pwa
success Installed "create-nuxt-app@3.2.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-pwa
? Project name: nuxt-pwa
? Programming language: TypeScript 
? Package manager: Yarn
? UI framework: Buefy
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
# スペースキーで選択してからEnterを押そう！
>(*) Axios
 (*) Progressive Web App (PWA)
 ( ) Content
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) ESLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: 
# どちらも選択していない
 ( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
>( ) Semantic Pull Requests

もし選択に納得できなかったら、作られたディレクトリを消してから再度プロジェクトを作成しよう。

> cd nuxt-pwa

C:\git\nuxt-pwa>dir 
 C:\git\nuxt-pwa のディレクトリ

2020/08/27  22:32    <DIR>          .
2020/08/27  22:32    <DIR>          ..
2020/08/27  22:32               207 .editorconfig
2020/08/27  22:32               233 .eslintrc.js
2020/08/27  22:32             1,253 .gitignore
2020/08/27  22:32    <DIR>          assets
2020/08/27  22:32    <DIR>          components
2020/08/27  22:32    <DIR>          layouts
2020/08/27  22:32    <DIR>          middleware
2020/08/27  22:32    <DIR>          node_modules
2020/08/27  22:32             1,432 nuxt.config.js
2020/08/27  22:32               800 package.json
2020/08/27  22:32    <DIR>          pages
2020/08/27  22:32    <DIR>          plugins
2020/08/27  22:32               335 README.md
2020/08/27  22:32    <DIR>          static
2020/08/27  22:32    <DIR>          store
2020/08/27  22:32               581 tsconfig.json
2020/08/27  22:32           412,544 yarn.lock