Nuxt.js、TypeScript、VuetifyでモダンなWebアプリを作る

モダンなWebアプリにはNuxtが良いって聞いたので、 Windows10に入れてみたいんだけどベストな方法を知りたい。

そんな疑問にお答えします！

Nuxt.jsとTypeScriptを使ったアプリを作る方法

今回、以下のバージョンを使用しています。

Node.jsが必要なため、以下の記事を参考にインストールをお願いします。

2021年12月19日 Windows10にNode.jsをインストールする方法【初心者向け】

Nuxt.jsのインストール

まずは以下のコマンドでプロジェクトを作成します。

>npx create-nuxt-app <プロジェクト名>

プロジェクト名はデフォルトのままでOKです。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in nuxt-typescript-vuetify-template
? Project name (nuxt-typescript-vuetify-template)

プロジェクト説明も変更しなくて大丈夫です。

? Project description (My terrific Nuxt.js project)

作成者も変更不要です。

? Author name (watalogs)

プログラミング言語はTypeScriptを選択してください。

? Choose programming language
  JavaScript
> TypeScript 

私はパッケージマネージャにnpmを選択しましたがお好みでOKです。

? Choose the package manager
  Yarn
> Npm

UIフレームワークはVuetify.jsを選択してください。

? Choose UI framework
  None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
> Vuetify.js 

サーバサイドフレームワークはExpressを選択しました。

? Choose custom server framework
  None (Recommended)
  AdonisJs
> Express
  Fastify
  Feathers
  hapi
  Koa
  Micro 

Axiosを追加しています。
　※　スペースキーを押すと選択できます。

? Choose Nuxt.js modules
>(*) Axios
 ( ) Progressive Web App (PWA) Support
 ( ) DotEnv     

LintツールはESLintとPrettierを選択してください。
　※　スペースキーを押すと選択できます。

? Choose linting tools
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint

テストフレームワークは私は不要なので選択しません。

? Choose test framework (Use arrow keys)
> None
  Jest
  AVA

SSRかSPAを選択しますが、こだわりがなければSSRでOKです。

? Choose rendering mode (Use arrow keys)
> Universal (SSR)
  Single Page App

私はエディターにVS Codeを使用しているため、jsconfig.jsonを選択しました。

? Choose development tools
>(*) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests 

package.jsonの変更

package.jsonに.tsを追加します。

"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."

nuxt-property-decoratorの設定

>npm i -S nuxt-property-decorator

実行確認

>cd nuxt-typescript-vuetify-template
>npm run dev

http://localhost:3000/ をブラウザで開き、以下の画面が表示されれば完了です！

お疲れ様でした！