VuetifyをNuxt.jsのプロジェクトに追加導入する

2020.09.27
VuetifyをNuxt.jsのプロジェクトに追加導入する

Nuxtのプロジェクトに後からVuetifyを導入する方法です。

Vuetifyを導入する

インストールするライブラリは1つだけ。
yarn add vuetify は不要。

$ yarn add -D @nuxtjs/vuetify

nuxt.config.js のmodulesに '@nuxtjs/vuetify' を追加

export default {
・・・
  modules: ['@nuxtjs/vuetify'],
}

Vuetifyを使う

上記2点の設定をすればこれだけで Vuetify が使えるようになっています。
利用するコンポーネント側での import も不要です。



試しに公式のサンプルの一部分を使って Vuetify のコンポーネントを表示してみます。
vuetify/centered.vue at master · vuetifyjs/vuetify

<template>
  <v-card-text>
    <v-form>
      <v-text-field
        label="Login"
        name="login"
        prepend-icon="mdi-account"
        type="text"
      ></v-text-field>
      <v-text-field
        id="password"
        label="Password"
        name="password"
        prepend-icon="mdi-lock"
        type="password"
      ></v-text-field>
    </v-form>
  </v-card-text>
</template>

これだけでキレイなログインフォームが作れそう!😍



利用出来るコンポーネントはVuetify公式のサイドバー「UIコンポーネント」から参照出来ます。
ex: Application service — Vuetify.js

おすすめ