2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

【Vuetify2.0に】Vuetify で outlined が反映されない時【なったよ】

結論

  • Version 2.* 系にアップグレードすればいいよ
  • ただし、大幅にデザインが変わっているからレイアウトは絶対崩れるよ

詳細のお話

Vuetifyを使って v-card を Outlined (shadowを0にして、薄く枠線をつけてくれる)表示にしたいと思っていた。
image.png

なので、コードにOutlinedオプションを追加したのだが、うまくいかない。


<v-card outlined>
  ...省略
</v-card>

デバッグで確認すると、outlinedが変換されていないことがわかる。
image.png

なので、無理やりclassを追加してみたが、やはり反映されない


<v-card class="v-card--outlined">
  ...省略
</v-card>

こういう時は一次情報、ということでVuetifyのリリースノートを見ました。
https://github.com/vuetifyjs/vuetify/releases

すると...

どうやら、oulinedが追加されたのは v2 系以降のようです。

outline から outlined に名前を変えたよ、というお知らせと()
image.png

v-card でも outlinedが使えるようになるよ!というお知らせが。

image.png

ということは... yarn.lock (or package.json)を恐る恐る確認すると...

image.png

燦然と輝く 1.5の文字が!!!

ということでアップデートしていきます。

各種方法についてhここら辺が参考になるのではないでしょうか。
Vuetifyを1.5.5→2.0.0にアップグレードしたおはなし。
Vuetify 2.0の注目機能とNuxt.jsでの試し方

私の場合はNuxt.js上で動かしているので、 @nuxtjs/vuetify でアップデートを試みます。

@nuxtjs/vuetify のバージョンは現行の最新バージョンである 1.2.1 を指定します。
そこらへんは下記ページで必要に応じて確認してください
https://www.npmjs.com/package/@nuxtjs/vuetify

$ yarn upgrade @nuxtjs/vuetify@1.2.1

yarn upgrade v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > sass-loader@7.1.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning "@nuxtjs/vuetify > vuetify-loader@1.3.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨  Rebuilding all packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ @nuxtjs/vuetify@1.2.1
info All dependencies
├─ @nuxtjs/vuetify@1.2.1
├─ deepmerge@4.0.0
├─ fibers@4.0.1
├─ vuetify-loader@1.3.0
└─ vuetify@2.0.5
✨  Done in 8.59s.

すると

image.png

反映された!

しかし、リリースノートでも

Updated every component to the new Material Design 2 specification

と謳っている通り、
v1系と比較して大幅にレイアウトの修正が入っているようなのであちこちレイアウトが崩壊します。

既存のプロジェクトのバージョンをあげる際には検証が必要です。

ちなみに

いつv2.0になったのかというと
image.png
...
image.png
超最近の話じゃないか...
(↑のスクショを撮ったのは2019.08.08です)

何が変わったのか、ちゃんとリリースノートを読んでおこうと思います。

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
Sign upLogin
2
Help us understand the problem. What are the problem?