# vue-scoped-css/no-deprecated-v-enter-v-leave-class

disallow v-enter and v-leave classes.

  • ⚙️ This rule is included in "plugin:vue-scoped-css/all".

# 📖 Rule Details

This rule reports the use of the v-enter and v-leave classes renamed in Vue 3 as an error.
You should change it to use the v-enter-from and v-leave-from classes instead.

See Migration from Vue 2 - Transition Class Change (opens new window) for more details.

<template> <Transition><div v-if="foo"/></Transition> <Transition name="fade"><div v-if="foo"/></Transition> </template> <style scoped> /* ✗ BAD */ .v-enter {} .v-leave {} .fade-enter {} .fade-leave {} /* ✓ GOOD */ .v-enter-from {} .v-leave-from {} .fade-enter-from {} .fade-leave-from {} </style>
Now loading...

If you define both old and new in the same selector, no error will be reported.

<template> <Transition><div v-if="foo"/></Transition> </template> <style scoped> /* ✓ GOOD */ .v-enter, .v-enter-from {} .v-leave, .v-leave-from {} </style>
Now loading...

This rule also reports enter-class and leave-class props.

<template> <!-- ✗ BAD --> <Transition enter-class="my-enter" leave-class="my-leave"> <div v-if="foo"/> </Transition> <!-- ✓ GOOD --> <Transition enter-from-class="my-enter" leave-from-class="my-leave"> <div v-if="foo"/> </Transition> <!-- If you define both old and new, no error will be reported. --> <Transition enter-class="my-enter" enter-from-class="my-enter" leave-class="my-leave" leave-from-class="my-leave"> <div v-if="foo"/> </Transition> </template> <style> .my-enter {} .my-leave {} </style>
Now loading...

# 🔧 Options

Nothing.

# 📚 Further reading

# Implementation

Last Updated: 10/15/2021, 12:03:51 PM