Vue.js / Nuxt.js

【Nuxt.js】 Vuetifyを途中から入れたかった

かれー

既に入れたNuxt.jsプロジェクトにVuetifyを追加したメモ

ライブラリをインストールする

// yarnの場合
yarn add --dev @nuxtjs/vuetify
// npmの場合
npm install --save-dev @nuxtjs/vuetify

nuxt.config.jsに設定する

  • nuxt.config.js
buildModules: [
  '@nuxtjs/vuetify', // ⭐️ 追加
],

デフォルトはdarkモードになっているので、色を変えたいときは下記も追記

buildModules: [
  '@nuxtjs/vuetify',
],
// ⭐️ 追加
vuetify: {
    theme: {
      primary: '#03a9f4',
      secondary: '#607d8b',
      accent: '#9c27b0',
      error: '#f44336',
      warning: '#ffc107',
      info: '#009688',
      success: '#4caf50'
    }
}

色選びに困った時はvuetify公式の色ジェネレーターが便利

layouts/default.vueを変更

vuetifyの機能を使えるようにするため、<v-app id="app"></v-app>で囲ってあげる

  • layouts/default.vue
<template>
  <v-app id="app">
    <nuxt />
  </v-app>
</template>

使ってみる

<template>
  <v-container>
    <v-card>
      <v-card-title class="font-weight-bold">タイトル</v-card-title>
      <v-card-text>
        テキストテキストテキスト <br>
        テキストテキストテキスト
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-btn color="primary" block>ボタン</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

反映された！

\ 案件のご依頼・ご相談はこちらから /