【Nuxt.js】の導入

こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。
今回は今流行りのvue.jsのフレームワークである「Nuxt.js」の導入の仕方についてご紹介いたします。

Nuxt.jsとは

SPAやSSRにも対応できるVue.jsのフレームワークです。
デフォルトで以下のパッケージが含まれていてwebpackなども導入されています。
Vue.js単体でSPAサイトを作成する場合vue-routerなどを別途いれる必要があるのですが、Nuxt.jsはデフォルトで様々な機能が入っています。

・Vue 2
・Vue Router
・Vuex（ストアオプションを利用している場合に限る）
・Vue Server Renderer（mode: 'spa' を利用している場合を除く）
・Vue Meta

前提として、Nuxt.jsを導入するにはnpmかyarnが使用できる環境が必要です。

npmを使用する場合、npxというコマンドを使用するのですがnpxはnpm5.2.0以降からデフォルトで入っているので、ターミナルでnpm -vでバージョン確認をしてみてください。

インストールするコマンド

// npmで導入する場合
$ npx create-nuxt-app <project-name>

// yarnで導入する場合
$ yarn create nuxt-app <project-name>

実行するとインストールが始まります。
ここは基本的にEnterでOKです。

? Project name: (nuxt-practce) 

Javascriptを使うかTypescriptを使うか聞かれるのでお好きな方を選んでください。
ちなみにTypescriptは型定義ができるJavascriptだと思ってもらえればOKです。

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

以前はNuxt.jsの導入後にTypescriptを個別に導入する必要があったのですが、最近はこの時点でTypescriptを導入するか聞いてくれるようになりました。

環境に合わせて選んでください。

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

既定のクラス名を付与するだけでスタイルを整えてくれるUI系のライブラリになります。
自分でスタイルを書く場合はNoneでOKです。

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

axiosやPWAにする場合は適宜選択してください。
spaceタブを押すことで選択されます。
なにも押さずにEnterを押せばなにも導入されません。

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

ソースコードを整形（Lint）してくれるライブラリです。
必要であれば選択してください。

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

Javascriptのテストフレームワークになります。
特に必要なければNoneでOKです。

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

SSRにするかSPAにするか聞かれます。
node.jsを使用する場合はSSRにしてください。
後々nuxt.config.js内のmodeオプションでも変更可能です。

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

node.jsのホスティングか静的ホスティングどちらがデプロイターゲットか聞かれるので適宜選択してください。

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

エディターで開発している際にコードをチェックしてくれる機能、オプションみたいなものです。
必要な方は選択してください。

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert 
selection)
❯◯ jsconfig.json (Recommended for VS Code)
◯ Semantic Pull Requests

以上でプロジェクトが作成されるのであとは下記コマンドを実行しlocalhostが立ち上がれば成功です！！

// npmの場合
$ npm run dev

// yarnの場合
$ yarn run dev

以上、Nuxt.jsの導入についてでした。
便利なフレームワークなのでぜひ導入してみてくださいね。
最後までお読みいただきありがとうございました。