【2020年版】Vue + Vuetify + typescript でWeb開発するならNuxt.jsを使おう

Q. Why Use Nuxt.js

A.チョロいから。

プログラマーの3大美徳

1. 怠慢(Laziness)
2. 短気(Impatience)
3. 傲慢(Hubris)

Vue と Vuetify と typescript で開発を覚えればもうしばらくは新しいこと覚えなくていいかなと思っていたのですが。
react もちょっと触っておよそ似たようなもんかなーあとは趣味の問題かなーと思っていたのですが、Vue + Vuetify(他UIフレームワーク) + ... で開発するんだったらNuxtにした方がチョロいと思ったので、怠慢であるために記事を書きます。

Nuxt.js とは

サーバサイドレンダリングがなんちゃらとか説明がありますが、よく使うもの全部入りのVue.jsと思うと分かりやすいかもしれません。
単に全部入りなだけではなく、router がフォルダ構成より自動生成される気の利いた機能なども付いてます。
このためだけに使ってもいいと思います。

●pages フォルダ以下の構成が、そのまま URL構成になる例

pages/
  index.vue
  login.vue
  users/
    index.vue
    new.vue
    _id/
      edit.vue
      index.vue

　↓　以下URLが自動生成される。スーパー便利です。

http://localhost/
http://localhost/login
http://localhost/users
http://localhost/users/new
http://localhost/users/xxxx
http://localhost/users/xxxx/edit

導入

node を持っていれば導入は非常に簡単です。
動くバージョンを探し当てるところで苦労しましたが、12.20.0 で動作確認できました。

# Windows 環境
nodist + 12.20.0
nodist 12.20.0

以下コマンドでプロジェクトを作成。

npx create-nuxt-app sample  

あとは対話式コンソールで質問に答えていけばプロジェクトが作成できます。

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in sample

プロジェクト名

プロジェクト名でフォルダが作成されます。英語にしておくのが無難。

? Project name: sample

言語

Typescript または Javascript

? Programming language: (Use arrow keys)
  JavaScript
> TypeScript

パッケージマネージャ

yarn または npm

? Package manager: (Use arrow keys)
> Yarn
  Npm

UI framework

モダンなUI framework はだいたい選べる様に見えました。ナウいと評判のTailwind CSS もいます。

? UI framework: (Use arrow keys)
  None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
> Vuetify.js

Nuxt.js モジュール

Axios と PWA が選べるのが気が利いてる感じでした。

Content は markdown ベースでページ作成ができる機能。
about ページなどで猛威を発揮しそうです。
nuxt/content

開発モードでのビックリするほど高速なホットリロード
Markdownの中でVueコンポーネントを利用できます
全文検索
静的サイト生成(SSG)のサポート nuxt generate
強力なクエリビルダーAPI (MongoDBライク)
PrismJSを利用した、Markdown内コードブロックのシンタックスハイライト
目次の自動生成
Markdown, CSV, YAML, JSON(5)、XMLを適切に処理します
hooksによる拡張

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA)
 ( ) Content

Lintツール

お好きなLintツールを選べます。

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint        
 ( ) Commitlint

Testフレームワーク

お好きなTestフレームワークを選べます。

? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO

Rendering モード

全力でSPAを選択。

? Rendering mode: (Use arrow keys)
  Universal (SSR / SSG)
> Single Page App

Deploy 先

全力でStaticを選択。

? Deployment target: (Use arrow keys)
  Server (Node.js hosting)
> Static (Static/JAMStack hosting) 

開発ツール

javascript の時は jsconfig.json を選択しておくとよさそう。

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

CI

なしにしました。

? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only) 

VCS

git にしました。

? Version control system: (Use arrow keys)
> Git
  None  

設定まとめ

内容を確認して、リターンキー押下でプロジェクト作成開始

✨  Generating Nuxt.js project in sample
? Project name: sample
? Programming language: TypeScript 
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier    
? Testing framework: None
? Rendering mode: Single Page App    
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git  

プロジェクト作成完了

コンソールに以下表示されたら作成完了です。

�🎉  Successfully created project sample

  To get started:

        cd sample
        yarn dev

  To build & start for production:

        cd sample
        yarn build
        yarn start


  For TypeScript users.

実行

cd sample
yarn dev

yarn run v1.17.3
$ nuxt-ts

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.14.11                     │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

i Preparing project for development                                                                                                                                     16:46:38
i Initial build may take a while                                                                                                                                        16:46:38
√ Builder initialized                                                                                                                                                   16:46:38
√ Nuxt files generated                                                                                                                                                  16:46:38

√ Client
  Compiled successfully in 8.53s

i Waiting for file changes                                                                                                                                              16:46:49
i Memory usage: 414 MB (RSS: 512 MB)                                                                                                                                    16:46:49
i Listening on: http://localhost:3000/                                                                                                                                  16:46:49  
No issues found.

ブラウザで http://localhost:3000/ へアクセスし以下の画面が表示されたら成功です。お疲れさまでした。

まとめ

新しくプロジェクト作るのが面倒くさくてなんとなくググったら圧倒的に便利なものが見つかり、面倒から解放されました。
これからも惰性で仕事をせずに怠慢に仕事をしていきたいと思います。