Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@don-bu-rakko

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

More than 1 year has passed since last update.

結論

  • 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です)

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

2
Help us understand the problem. What is going on with this article?
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
don-bu-rakko
ECコンサルタントしたり、SEしたりしてました。今はWebサービス開発中。JavaScript (Vue.js, Nuxt.js) / PHP (Laravel) / Python をよく使っています。 G's Academy Lab6th。
proglearn
"満足の最大化"をキーワードにWebサービスを生み出す会社です。議事録をDXするOneMinutes, オンライン動画試験のLINEプラットフォームNEXAM などを運営しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?