概要

Nuxtを1年ぐらい触ってきた
つくったNuxtのテンプレ紹介するよ
つくったテンプレ以外におすすめの設定を紹介するよ

前提知識

Nuxtとは、Vue.jsのフレームワーク。

Nuxtは、モダンな web アプリケーションを作成する Vue.js に基づいたプログレッシブフレームワークです。Vue.js 公式ライブラリ（vue、vue-router や vuex）および強力な開発ツール（webpack、Babel や PostCSS）に基づいています。 Nuxt の目標は、優れた開発者エクスペリエンスを念頭に置き、Web 開発を強力かつ高性能にすることです。

はじめに - NuxtJS

SSR(サーバサイドレンダリング)とかの設定が楽だったり、Nuxtのプラグインが充実してたり、他にもいろいろ機能がある。

Nuxtいらない説(vue-cliでよくない)とかあるけど、自分はわりと好き。

QiitaでNuxtがやんわり流行っているのは、「Vueのとっつきやすさ+構築の楽さ+ブログの多さ」が大きな理由だと個人的に感じている。

正直Nuxt自体がVueのテンプレみたいなところもあるし、npx nuxt-create-appでいろいろ設定できるのでNuxtのテンプレっていう言葉しっくり来てない。
どちらかというと自分なりのNuxtの初期設定っていう話のほうが正しい気がする。

作ったNuxtのテンプレの紹介

GitHubに公開してあります↓ スターをつけてもらうと泣いて喜びます。

redshoga/nuxt-ts-gottani-template: Nuxt + Typescript + α project template

主な機能としては以下の通り

TypeScriptの設定
型安全なVuexの構成(vuex-module-decoratorsを使ってます)
型安全な環境変数の構成
SCSSのサポート, Normalize.cssの導入
Path Autocompleteの設定(@, ~以降でもパスの補完がVSCodeで効く)
ESlintの設定(VSCodeでは保存時に自動フォーマット)
Stylelintの設定(VSCodeでは保存時に自動フォーマット)

TypeScriptの設定

基本

TypeScript サポート - NuxtJSをやっただけです。

VueはTSにすると以下のどの形で書くかが一番重要な点になると思います。
これをまず先に決めて実装するのがいいと思います。(ここを迷って無駄な時間を浪費した)

Vue.extend({})でJSの時と似たような形 (https://jp.vuejs.org/v2/guide/typescript.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9)
vue-class-componentを使ってクラススタイルVueコンポーネントな形(https://jp.vuejs.org/v2/guide/typescript.html#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-Vue-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)
vue-property-decoratorを使ってクラススタイル+デコレータな形(https://github.com/kaorun343/vue-property-decorator)

今回紹介しているテンプレはVue.extend({})の形で実装しています。

Vuex

Vuexの管理は公式のまんま(vuex-module-decoratorsを使う方法)でやるといいです。

ストア | Nuxt TypeScript

ここらへんの実装方法はいろいろあって正直悩みます。Nuxt Typescript公式のものと本で読んだものなど合わせれば5パターンぐらいありそう。チームのスキルとの相性とかも重要だとおもいます。

Sass(.scss)の話

生CSSは辛いので、Sassを導入しています。css-moduleも考えましたがなるべく素のウェブ構築に近づけたかったため今回は入れていないです。(まだ検討している)

実は以下(style-resources-module)をいれようと考えていました。

style-resources-moduleを入れるとnuxt.config.jsにグローバルな変数ファイル@import不要で入れることができて便利です。
ただし、@importが不要なので変数がどこから来たものなのかわからなくなったり、コンポーネント自体がNuxtの設定に依存するのであんまりよくないです。

使い方は以下のよう

~/assest/sccs/variables.scss

$color-main: red;

nuxt.config.js

  ...
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   scss: ["~/assest/sccs/variables.scss"],
  }
  ...

ButtonRectangle.vue

<template>
  <div class="container" @click="...">
  </div>
</template>

<style lang="scss">
.container {
  /* variables.scssの中身の変数を使える */
  background-color: $color-main;
}
<style>

アプリケーションのメインカラーの設定や、z-indexを統合して管理できるのが強い。
けど@importしても同じことができるので、@importしたほうがいいかとというのがここ最近の結論。

環境変数の設定

以下の記事をまんまに実装しました。便利便利。

Nuxt.js + TypeScript のアプリケーションで環境変数を安全に管理する - Qiita

最近Nest.js(TSのバックエンドフレームワーク)を触っているのですが、この環境変数の管理もわりとガチガチにやってくれるので以下のような実装もいいのかなって思っています。
内部的にJoiを使って環境変数の検証をしているだけです。

Configuration | NestJS - A progressive Node.js web framework

フォーマッタとかの話

Stylelintは早めにいれたほうがいいです。(.vueファイルの中身の<style>内をフォーマットしてくれるようになります。)
なぜかStylelintを怖がっていたのですが、想像以上に設定は楽なのでおすすめです。

またTS,JS,HTML関係はESLint+Veturでフォーマットしています。

TSLintもありますが、TSでもESLintの方が強い気がします。もろもろ。情報も多いですし。
ここら辺の話は自身がないので、お気軽にマサカリ飛ばしてください。

eslint vs tslint - Google 検索

設定はVeturを入れて以下の設定を.vscode/settings.json以下に書くだけです。

  ...
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  ...

VSCodeを使っているなら、path-autocompleteは入れた方がいいです。(無駄な時間が減らせます)
しかし、Nuxtを使っていると@とか~とかでてきてちゃんと補完してくれません。

以下の設定を.vscode/settings.json以下に書くだけでちゃんと補完してくれるようになります。オススメ。

個人的に@@を使うことはほぼほぼ無いので以下の設定にしています。(YAGNI)

  "path-autocomplete.pathMappings": {
    "~": "${folder}",
    "@": "${folder}"
  },

小話: 将来的に入れたい機能

型安全のHTTPクライアントのaspidaが強そうなので入れたい。

aspidajs/aspida

と思っていろいろ調べてたらaspidaの作者様のNuxt+TSのテンプレが出てきた。

m-mitsuhide/nuxt-ts-starter

小話: JSテンプレ

ちなみに上記のテンプレの元ネタになっているJSのテンプレもあります(TS苦手な人,初学者にはいいかも(?))

redshoga/nuxt-gottani-template: Nuxt project template: various features included

最後に

テンプレを作ったというより、テンプレの作り方みたいな話になっちゃった気がする。

結局のところ、プロジェクトとチームに見合ったものをいれていくといいと思います。(ただしTSへの移行は早めにしたほうがいい)

Nuxt + TSのテンプレを作った + 自分なりのおすすめの設定

概要