TypeScript環境のNuxt.jsにVuetifyを導入しよう
  • 2021.12.28に公開
  • 2021.12.31に更新
  • ブログ構築TS
  • 2. Vuetifyセットアップ
  • No.1 / 3

この記事で達成すること

NuxtプロジェクトにUIフレームワークのVuetifyを導入します。導入後には以下の設定を行います。

  • TypeScript環境でVuetifyを使用する設定
  • Vuetifyのデフォルトカラーの変更
  • Vuetifyにオリジナルカラークラスを追加

@nuxtjs/vuetifyをインストールする

ターミナルからモジュールインストールコマンドを実行します。

Vuetifyのインストールには、公式にあるように必ず--devオプションをつけてください。

% yarn add --dev @nuxtjs/vuetify

@nuxtjs/vuetify - GitHub

インストールを確認しましょう。

% yarn list --pattern @nuxtjs/vuetify

└─ @nuxtjs/vuetify@1.12.3

Nuxtに@nuxtjs/vuetifyを登録する

nuxt.config.jsにVuetifyを読み込むよう設定します。

modulesプロパティではなく、buildModulesに追加してください。

nuxt.config.js
export default {
  buildModules: [
    // 追加
    // https://www.npmjs.com/package/@nuxtjs/vuetify
    '@nuxtjs/vuetify'
  ],
}

OK。これでVuetifyが使用できるようになりました。

this.$vuetifyをTypeScript環境で使用する

@nuxtjs/vuetifyを導入すると、Nuxtコンテキストに$vuetifyが追加されます。

デフォルトのNuxt Context: The Context - Nuxt.js

layouts/default.vue
@Component
export default class DefaultLayout extends Vue {
  mounted () {
    // this.$vuetifyが使用できるようになる
    console.log(this.$vuetify)
  }
}

ここにはブレイクポイントなどのVuetifyのクラスが格納されています。

console.log
application: Application
breakpoint: Breakpoint
goTo: ƒ goTo(_target, _settings)
icons: Icons
isHydrating: false
lang: Lang
presets: Presets
rtl: false
theme: Theme

しかしTypeScript環境では、デフォルトのNuxtに登録されていないプロパティなので、このようなエラーが発生します。

terminal
ERROR  ERROR in layouts/default.vue:15:22
TS2339: Property '$vuetify' does not exist on type 'DefaultLayout'.
    13 | export default class DefaultLayout extends Vue {
    14 |   mounted () {
  > 15 |     console.log(this.$vuetify)
       |                      ^^^^^^^^
    16 |   }
    17 | }
    18 | </script>

このTypeエラーを回避するために、tsconfig.jsonvuetifyを追加します。

tsconfig.json
{
  "compilerOptions": {
    "types": [
      // 追加
      "vuetify"
    ]
  },
}

これでTypeScript環境のNuxt.jsで、this.$vuetifyが使用できるようになりました。

ESLintのコンソールログ警告をoffにする

ターミナルに出力されるTypeエラーを見やすくするために、console.log()で表示されるESLintの警告を、非表示に設定します。

この警告を非表示にする
 ERROR  WARNING in layouts/default.vue:15:5
no-console: Unexpected console statement.
    13 | export default class DefaultLayout extends Vue {
    14 |   mounted () {
  > 15 |     console.log(this.$vuetify)
       |     ^^^^^^^^^^^
    16 |   }
    17 | }
    18 | </script>

.eslintrc.jsファイルにルールを追加しましょう。

.eslintrc.js
module.exports = {
  rules: {
    // 追加
    // console.logの警告を非表示
    'no-console': 'off'
  }
}

.eslintrc.jsに追加した設定はNuxt起動時に読み込まれるので、Nuxtサーバを停止し再度起動します。

% Control + C
% yarn dev

これで不要な警告ログが表示されなくなりました。

Vuetifyを使ってみよう

Vuetifyは、<v-app>で囲まれたコンポーネントに対して有効になります。

そこでレイアウトファイル全体を<v-app>で囲みます。

layouts/default.vueを編集しましょう。

layouts/default.vue
<template>
  <v-app>
    <v-main>
      <nuxt />
    </v-main>
  </v-app>
</template>

v-mainタグとは?

Vuetifyにメインコンテンツの領域を教えてあげるコンポーネントになります。

ツールバーをヘッダーに固定する場合などに、メインコンテンツが固定されたコンポーネントに被さらないようにするために使用されます。

<nuxt>タグ全体を囲むことで、ページファイル全体をメインコンテンツとして指定しています。

参考: Application service — Vuetify

ボタンコンポーネントを表示する

pages/index.vueにVuetifyのボタンを表示してみましょう。

colorsというString配列を用意し、Vuetifyのデフォルト配色を確認します。

<v-container>で囲むことで、領域をいい感じに調整してくれます。

pages/index.vue
<template>
  <div>
    <v-container>
      <v-btn
        v-for="(color, i) in colors"
        :key="`color-${i}`"
        :color="color"
      >
        {{ color }}
      </v-btn>
    </v-container>
  </div>
</template>

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

@Component
export default class IndexPage extends Vue {
  colors: string[] = [
    'primary',
    'info',
    'success',
    'warning',
    'error'
  ]
}
</script>

ブラウザで確認すると、いい感じに表示できました。

2021-12-27 23-11-58

Vuetifyのデフォルトカラーをカスタマイズする

Vuetifyが用意しているカラーを変更しましょう。

nuxt.config.jsに、vuetifyプロパティを追加します。

nuxt.config.js
export default {
  // 追加
  vuetify: {
    theme: {
      themes: {
        light: {
          primary: '2fa0eb',
          info: '5eb2eb',
          success: '3eb370',
          warning: 'f6ad49',
          error: 'ec6d71',
          background: 'f7f9fa'
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Color出典: 和色大辞典

Vuetifyのカスタムカラー設定方法

Vuetifyには2つのテーマがあります。

  1. light
  2. dark

そのテーマのプロパティごとに、カラーをカスタマイズすることができます。

ここには、オリジナルのプロパティ(上記で言うbackground)を持たせることも可能です。

Vuetifyのオリジナルカラークラスを確認しよう

pages/index.vueにオリジナルカラーを追加して、ブラウザで確認しましょう。

pages/index.vue
@Component
export default class IndexPage extends Vue {
  colors: string[] = [
    'primary',
    'info',
    'success',
    'warning',
    'error',
    // 追加
    'background'
  ]
}

VuetifyのCSSクラスに.backgroundが追加され、想定通りの色となっています。

2021-12-28 09-30-37

GitHubにPushして、今回の作業は終了です。

% git commit -am "Add @nuxtjs/vuetify & vuetify custom color set up"
% git push

次回は?

VuetifyにカスタムCSSを追加して、サイト全体のバックグラウンドカラーなどを変更します。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。