CODEWITHSUNDEEP
cssvue.jsvuejs3
Manoj Shrestha
Manoj Shrestha

Reputation: 4684

Vue 3 ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

I started getting the following warning in Vue 3 with the ::v-deep usage.

::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

The CSS looks like as follows:

.parent ::v-deep .child {
   ...
}

What's the correct way to use suggested option ::v-deep(<inner-selector>)?

Upvotes: 58

Views: 82231

Answers (4)

Simon Klimek
Simon Klimek

Reputation: 352

This issue also occurs in Vue 2.7

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

I I think neither of the solutions above solve that warning.

Edited working using:

:deep() {
  .class {}
}

But it finds error in npm dependencies as well

Upvotes: 15

Caro P&#233;rez
Caro P&#233;rez

Reputation: 538

Vue3

div

div:deep(.v-img) {
    overflow: visible;
}

Upvotes: 3

eightball
eightball

Reputation: 1230

Little update: now, you need to change it to:

.parent :deep(.child) {
    (CSS rules)
}

Upvotes: 81

skirtle
skirtle

Reputation: 29092

The relevant RFC is here:

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

I believe you need to change it to:

.parent ::v-deep(.child) {

Update:

The warning message mentioned in the question has been changed in later versions of Vue 3 to recommend using :deep() instead. This is an alias for ::v-deep() and it has been added to the documentation here:

https://v3.vuejs.org/api/sfc-style.html#deep-selectors

Upvotes: 52

Related Questions