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

【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 do not you register as a user and use Qiita more conveniently?
  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