Help us understand the problem. What is going on with this article?

Vuetify 2.0の注目機能とNuxt.jsでの試し方

本日 Vuetify v2.0.0 Arcadia がリリースされました!
居ても立っても居られず、早速試してみました!

個人的注目機能

VColorPicker

リファレンス:VColorPicker
vue-colorの使用を検討していた身としては、Vuetifyのコンポーネントとして提供されるのはありがたいです。

color1
color2

VFileInput

リファレンス:VFileInput
こちらも地味にVuetifyに今までなかったやつです。
「ファイルを選択」ボタンのカスタマイズは地味に面倒なので、大変ありがたいです。

input1
input2

VOverlay

リファレンス:VOverlay
こちらもたまにcssで自力でやっていたので、楽になりますね。

overlay1
overlay2

Nuxt.jsでVuetify 2.0を使う

素のvueの場合はvuecliでできるようですが、Nuxt.jsの場合は@nuxt/vuetifyモジュールがまだv2.0.0に未対応なため、自力で導入する必要があります。
対応してました!→ nuxt-community/vuetify-module

下記の2種類の方法で利用可能です。

  • ①nuxtのvuetify-moduleを利用する方法
  • ②自分でpluginsに登録する方法

基本的には①で導入することをおすすめします。

①nuxtのvuetify-moduleを利用する方法

プロジェクト作成

この例ではcreate nuxt-appで新規に作成したプロジェクトを想定しています。

# ディレクトリ作成
mkdir vuetify2-example
# 移動
cd vuetify2-example

# プロジェクトの作成
yarn create nuxt-app
# Choose UI framework では、自力でVuetifyを導入するので、Noneを指定します
# 他の項目は任意です

# @nuxtjs/vuetifyを依存に追加
yarn add @nuxtjs/vuetify

nuxt.config.jsでの設定

下記設定を追加します。

nuxt.config.js
// 略
  devModules: ['@nuxtjs/vuetify'],
  vuetify: {
    theme: {
      dark: false
    }
  },
// 略

vuetifyの中にいろいろ設定できます。

VColorPickerを表示してみる

適当に新コンポーネントを試してみましょう。

pages/index.vue
<template>
  <v-app>
    <v-color-picker></v-color-picker>
  </v-app>
</template>

以下のコマンドで起動して確認します。

yarn dev

image.png
無事に起動できました!

②自分でpluginsに登録する方法

プロジェクト作成

この例でもcreate nuxt-appで新規に作成したプロジェクトを想定しています。

# ディレクトリ作成
mkdir vuetify2-example
# 移動
cd vuetify2-example

# プロジェクトの作成
yarn create nuxt-app
# Choose UI framework では、自力でVuetifyを導入するので、Noneを指定します
# 他の項目は任意です

# vuetifyを依存に追加
yarn add vuetify
# アイコンを追加
yarn add @mdi/font -D

Vuetify plugin

あとは以下の実装を追加するだけです。

plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    theme: {
      dark: false // dark or lightはここで指定するようになった
    },
    icons: {
      iconfont: 'mdi' // iconを指定しないとチェックボックス等が正常に表示されない
    }
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

nuxt.config.jsに下記設定を追加します。

nuxt.config.js
  plugins: [
    '@plugins/vuetify'
  ],
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away