Nuxt✕Vuetifyの環境構築を簡単に解説

おはようございます。Shotaです。

今回の記事では、Nuxt✕Vuetifyの環境構築を簡潔に解説します。

必要なもの

• Visual Studio Code
• Node.js
• Vuetify.js

ソフトウェアのインストール

以下のサイトからVisual Studio Codeをインストールしてください。詳細設定は割愛します。

Nuxtを動かす際には、npm(Node Package Module)コマンドが必要です。これを使えるようにするため、以下のサイトからNode.jsをインストールしてください。

Nuxtのインストール

ソフトウェアのインストールが終了したら、次は以下のコマンドでNuxtをインストールしてください。

npm init nuxt-app nuxt-site

詳細設定

プロジェクト名

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in nuxt-site
? Project name: 

この状態でEnterを入力すると、そのままnuxt-siteがプロジェクト名になります。

使用言語

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

JavaScriptを選択します。(Nuxt✕TypeScriptは後日詳細に解説)

使用パッケージ

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

Npmを選択します。

CSSフレームワーク

? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Oruga
  Primevue
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuetify.js

Vuetify.jsを選択します。

Module選択

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios - Promise based HTTP client
 ( ) Progressive Web App (PWA)
 ( ) Content - Git-based headless CMS

Axiosを選択します。

Linting Tool選択

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

この部分は選択しません。

テスト用フレームワーク選択

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

Noneを選択します。

レンダリングモード

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

Universalを選択します。

デプロイ

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

Serverを選択します。

開発ツール

? 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)

この部分は選択しません。

GitHub名

What is your GitHub username?

そのままEnterを入力します。あなたのGithub名が出力されます。

バージョン管理システム

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

Gitを選択します。

🎉  Successfully created project nuxt-site

  To get started:

        cd nuxt-site
        npm run dev

  To build & start for production:

        cd nuxt-site
        npm run build
        npm run start

ターミナルに以上の内容が表示されたら基本設定は終了です。

実際に動かしてみる

以下のコマンドを入力して、Nuxtの開発者サーバを立ち上げてください。

cd nuxt-site
npm run dev

http://localhost:3000/にアクセスし以下のような画面が表示されたら成功です。

まとめ

今回の記事では、Nuxt✕Vuetifyの環境構築の手順を解説してみました。

短いですが、今回の記事はこれで終了です。