Vuetify2をNuxt.jsで試してみた

こんにちは！フリージアの東山です。

最近、Vuetify2の正式版がリリースされましたので、Nuxt.jsで試してみました。以下の動作を検証することがゴールです。

  • Nuxt.js × Vuetify2が正常に動作する
  • Vuetify2のSASSの変数を上書きする

※ Nuxt.js (v2.9.x) 以上の場合 (2019/10/5 追記)

本記事はNuxt.js (v2.8.1) での内容を記載していますが、Nuxt.js (v2.9.x以上) の場合、Typescript周りの設定が必要です。

Nuxt.js (v2.9.x) から、Typescript周りのモジュールが別パッケージとして分離されました。
V2.8.1からv2.9.x以上へのアップグレードを考えている方は、Migration from Nuxt 2.8 を参考に設定を追加して下さい。

簡単に纏めると、次の設定が必要です。

  • パッケージの変更
    $ yarn remove @nuxt/typescript
$ yarn add -D @nuxt/typescript-build

# nuxt.config.tsの場合 (nuxt.config.jsの場合は不要)
$ yarn add @nuxt/typescript-runtime
  • nuxt.config.tsの修正
    // nuxt.config.ts
export default {
  buildModules: ['@nuxt/typescript-build']
}
  • tsconfig.jsonの修正
    // tsconfig.json

// @nuxt/vue-app、@nuxt/configは削除する
"compilerOptions": {
  "types": [
    "@nuxt/types"
  ]
}

この他、「yarn nuxt (build|generate|start)」コマンドは、「yarn nuxt-ts (build|generate|start)」コマンドに修正する必要があります。

Nuxt.js × Vuetify2が正常に動作する

Nuxt.jsのセットアップ

Nuxt.js (v2.8.1) × Typescriptの最小構成でセットアップします。 具体的なセットアップ方法は本記事の趣旨とは少しずれるため割愛します。セットアップ方法について知りたい方は、Nuxt.js (Github)やNuxtjs.orgをご参照ください。

セットアップ後のソースコードはGithubにプッシュしています。 前述の通り、最小構成となっていますので、コードの静的解析 (ex. eslint) やテスト (ex. jest) などの設定は含まれていません。後日、設定済みのブランチをプッシュできればと考えています。

以下のコマンドでNuxt.jsを起動することができます。

$ cd /path/to/workspace

# リポジトリのクローン
$ git clone https://github.com/freegian/nuxtjs-template.git
$ git checkout nuxtjs-setup

# Nuxt.jsの起動 
$ yarn
$ yarn dev

起動後、「http://localhost:3000/」にブラウザでアクセスすると、正常に動作していることを確認できます。
capture 1

Vuetify2の導入

Vuetify2の導入方法はVuetifyjs.comに詳しく記載されていますが、Nuxt.jsでの導入方法は記載されておりません。
本記事では、@nuxtjs/vuetify を利用して、Vuetify2を導入します。

まずは必要なパッケージを追加します。

$ cd /path/to/nuxtjs-template
$ yarn add -D @nuxtjs/vuetify

次に、Nuxt.jsのモジュールとして@nuxtjs/vuetifyをロードするよう設定を追加します。
@nuxtjs/vuetifyのGithubを見ると、modulesではなく、devModulesに追加するよう指示されているため、そのように設定します。

// nuxt.config.ts

const config: NuxtConfiguration = {
  srcDir: 'src',

  devModules: ['@nuxtjs/vuetify'],
  build: {
    // 省略
  }
}

これでVuetify2の設定は完了です。 Nuxt.jsを利用していないVueプロジェクトでは、VueプラグインとしてVuetifyの登録、依存パッケージ (dart-sass、fiber) の追加、sass-loaderへの登録をする必要がありますが、 Nuxt.jsでは上記のように簡単にVuetify2を利用することができます。とても便利ですね。

このままNuxt.jsを起動しても正常に動作しますが、Vuetify2が動作していることを確認したいため、簡単なページを追加します。
プロジェクトルートにsrcディレクトリを作成し、layouts、pagesをそれぞれ追加します。

  • ディレクトリ構造

    /
├ src                : Application Directory 
│  ├ layouts           .. layouts (https://ja.nuxtjs.org/examples/layouts/)
│  │  └ default.vue
│  └ pages             .. pages (https://ja.nuxtjs.org/guide/routing/)
│     └ index.vue
// 省略
└ yarn.lock

  • src/layouts/default.vue

    <template>
<v-app>
    <v-content>
        <v-container fluid fill-height>
            <v-layout align-center justify-center>
                <nuxt />
            </v-layout>
        </v-container>
    </v-content>
</v-app>
</template>

  • src/pages/index.vue

    <template>
<div class="text-xs-center">
    <p>正常にVuetify2を登録できていれば、上下左右中央に表示されます</p>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class Index extends Vue {}
</script>

追加後、先程と同様のコマンドでNuxt.jsを起動し、「http://localhost:3000/」にブラウザでアクセスしてください。
下画像のように、画面中央に「正常にVuetify2を登録できていれば、上下左右中央に表示されます」という文章が表示されていれば、動作確認完了です。
capture 2

ここまでのソースコードはGithubにプッシュしています。 正常に動作しないなどありましたら、ご確認ください。

Vuetify2のSASSの変数を上書きする

SASSの変数を上書きするための事前準備

ここからはVuetify2のSASSの拡張を行っていきます。

Vuetify2になって個人的に最も嬉しかった変更が、このSASSの拡張です。
前バージョンのVuetifyでは、フレームワーク側で設定されているスタイルの細かい変更をしたい場合、cssを上書きするしかありませんでした。 しかし、Vuetify2ではスタイルを定義する多くの値がSASSの変数となっており、また、それらを上書きすることができるため、前バージョンに比べて圧倒的にカスタマイズ性が向上しました。

さて、SASSの拡張をするには事前準備が必要になります。 公式では、SASS variablesに具体的な手順が記載されています。

@nuxtjs/vuetifyを利用している場合は、@nuxtjs/vuetify側の仕様に従う必要があります。 具体的には、次の2つの設定を行います。

  • SASSの変数を上書きするためのsass(scss)ファイルを作成する
  • SASSの変数を上書きするためのsass(scss)ファイルをsass-loaderのdata属性で読み込む

それぞれ以下のように設定します。

SASSの変数を上書きするためのsass(scss)ファイルを作成する

$ cd /path/to/nuxtjs-template/src

# assetsフォルダの作成
$ mkdir -p assets/css

# SASSの変数を上書きするためのsass(scss)ファイルの作成
$ cd assets/css
$ touch _variables.scss

SASSの変数を上書きするためのsass(scss)ファイルをsass-loaderのdata属性で読み込む

$ cd /path/to/nuxtjs-template
$ vi nuxt.config.ts

... 省略
  devModules: ['@nuxtjs/vuetify'],
  vuetify: {
    customVariables: ['~/assets/css/variables.scss'],
    treeShake: true
  },
... 省略

Nuxt.jsビルド時にWebpackのloaderとして設定されているsass-loaderでsass -> cssのコンパイルが行われます。
上記の設定をすると、sass -> cssのコンパイル時に、sassファイルの先頭に以下のソースコードが挿入されます。

@import '~/assets/css/variables.scss';

これにより、sassファイルで利用されている変数を事前に設定することができます。

SASSの変数を上書きする

本記事の最後の節になります。 実際にSASSの変数を上書きし、きちんと反映されていることを確認します。

ここでは、Vuetify2で設定されているベースフォントサイズを変更します。 先ほど作成したsass(scss)ファイルを開き、以下を追記してください。

@import '~vuetify/src/styles/styles.sass';
$font-size-root: 14px;

「$font-size-root」は「~/vueitfy/src/styles/settings/___variables.scss」で定義されている変数です。 「!default」フラグが付与されているますので、再定義することで上書きすることができます。
ここでは、デフォルトで16pxとなっているベースフォントサイズを14pxに変更しました。

追記が完了したら、再度Nuxt.jsを起動し、フォントサイズが小さくなっていることを確認してください。
capture 3

ここまでのソースコードはGithubにプッシュしています。 正常に動作しないなどありましたら、ご確認ください。

最後に

本記事では、Nuxt.js × Vuetify2のプロジェクトを作成し、SASS変数を上書きしました。

実際の現場では、今回書き換えたベースフォントサイズ以外にも、様々な変数を再定義することが予想されます。 その場合、例えばコンポーネント毎に上書き用のsass(scss)ファイルを作成し、「_variables.scss」では、それらをインポートするのみに留めると保守性や可読性が向上すると思います。

本記事を見て、ご意見やご指摘等ございましたら、「[email protected]」まで是非ご連絡ください。

シェア
ツイート