Search code examples
vuejs3less

vue 3 - ::v-deep is deprecated

I have this less code for one vue 3 component.

<style lang="less" scoped>
::v-deep {
  font-size: 16px;
}
</style>

Let's say the template is this:

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ text }}</p>
  </div>
</template>

My IDE displays me a warning on v-deep: v-deep is deprecated, consult docs for better; usage without arguments is deprecated since Vue 3.0 alternative. The compiler gives an error.

The question is: how do I define a (base) style for my component? I'd like to define some common properties, like color, size etc. Also, I don't want to add a class to the parent div element - I'm looking for another solution (if exists).

Thank you.

Solution

  • ::v-deep was replaced by :deep().

    :deep(*) {
  font-size: 80px;
}