vueRuntime flags and compiler flags
Runtime flags (such as GLOBAL_MOUNT or INSTANCE_EVENT_EMITTER) are set with configureCompat(), globally or per component with the compatConfig option. Compiler flags (the COMPILER_ ones, such as COMPILER_FILTERS) change how templates compile and are set in the build tool.
// Default: Vue 2 behavior everywhere (MODE: 2)
import { configureCompat } from 'vue'
// opt out feature by feature
configureCompat({
FILTERS: false,
INSTANCE_EVENT_EMITTER: false,
})// Recommended with vueleap: Vue 3 by default
import { configureCompat } from 'vue'
// opt in only to what the code still needs
configureCompat({
MODE: 3,
FILTERS: true,
INSTANCE_EVENT_EMITTER: true,
})Get the minimal flags for your project
vueleap maps every finding to its flag and prints the smallest configuration that keeps your app running, split into runtime and compiler parts:
npx vueleap --compatAs you fix findings, rerun the command: flags disappear from the output, and you can delete them from your config. When nothing is left, remove @vue/compat.
Flags vueleap detects
| Flag | Kind | vueleap rules |
|---|---|---|
COMPILER_FILTERS | Compiler | filters: Filters are removed |
COMPILER_INLINE_TEMPLATE | Compiler | inline-template: inline-template is removed |
COMPILER_IS_ON_ELEMENT | Compiler | is-on-element: is on native elements needs the vue: prefix |
COMPILER_V_BIND_OBJECT_ORDER | Compiler | v-bind-object-order: v-bind="object" is order sensitive |
COMPILER_V_BIND_SYNC | Compiler | sync-modifier: .sync is replaced by v-model:prop |
COMPILER_V_IF_V_FOR_PRECEDENCE | Compiler | v-if-v-for: v-if now has higher priority than v-for |
COMPILER_V_ON_NATIVE | Compiler | native-modifier: The .native modifier is removed |
COMPONENT_FUNCTIONAL | Runtime | functional-components: Functional components changed |
COMPONENT_V_MODEL | Runtime | component-v-model: v-model on components uses modelValue |
CONFIG_DEVTOOLS | Runtime | global-config: Vue.config moved to app.config |
CONFIG_IGNORED_ELEMENTS | Runtime | config-ignored-elements: Vue.config.ignoredElements is replaced by isCustomElement |
CONFIG_KEY_CODES | Runtime | config-key-codes: Vue.config.keyCodes is removed |
CONFIG_OPTION_MERGE_STRATS | Runtime | global-config: Vue.config moved to app.config |
CONFIG_PRODUCTION_TIP | Runtime | config-production-tip: Vue.config.productionTip is removed |
CONFIG_SILENT | Runtime | global-config: Vue.config moved to app.config |
CUSTOM_DIR | Runtime | directive-hooks: Custom directive hooks are renamed |
FILTERS | Runtime | filters: Filters are removed |
GLOBAL_DELETE | Runtime | set-delete: $set, $delete, Vue.set and Vue.delete are removed |
GLOBAL_EXTEND | Runtime | global-extend: Vue.extend is removed |
GLOBAL_MOUNT | Runtime | global-mount: new Vue() is replaced by createApp() |
GLOBAL_OBSERVABLE | Runtime | global-api: Global Vue API moved to the app instance |
GLOBAL_PRIVATE_UTIL | Runtime | global-api: Global Vue API moved to the app instance |
GLOBAL_PROTOTYPE | Runtime | global-prototype: Vue.prototype is replaced by app.config.globalProperties |
GLOBAL_SET | Runtime | set-delete: $set, $delete, Vue.set and Vue.delete are removed |
INSTANCE_ATTRS_CLASS_STYLE | Runtime | attrs-class-style: $attrs now includes class and style |
INSTANCE_CHILDREN | Runtime | children: $children is removed |
INSTANCE_DELETE | Runtime | set-delete: $set, $delete, Vue.set and Vue.delete are removed |
INSTANCE_DESTROY | Runtime | destroy: $destroy is removed |
INSTANCE_EVENT_EMITTER | Runtime | event-emitter: $on, $off and $once are removed |
INSTANCE_EVENT_HOOKS | Runtime | hook-events: hook: lifecycle events are renamed |
INSTANCE_LISTENERS | Runtime | listeners: $listeners is removed |
INSTANCE_SCOPED_SLOTS | Runtime | scoped-slots: $scopedSlots is removed |
INSTANCE_SET | Runtime | set-delete: $set, $delete, Vue.set and Vue.delete are removed |
OPTIONS_BEFORE_DESTROY | Runtime | destroy-hooks: beforeDestroy and destroyed are renamed |
OPTIONS_DATA_FN | Runtime | data-object: data must be a function |
OPTIONS_DESTROYED | Runtime | destroy-hooks: beforeDestroy and destroyed are renamed |
RENDER_FUNCTION | Runtime | render-function-h: Render functions no longer receive h |
TRANSITION_CLASSES | Runtime | transition-classes: Transition classes renamed |
TRANSITION_GROUP_ROOT | Runtime | transition-group-root: <transition-group> renders no wrapper |
V_ON_KEYCODE_MODIFIER | Runtime | keycode-modifiers: KeyCode modifiers are removed |
WATCH_ARRAY | Runtime | watch-array: Array watchers need deep for mutations |
The full list of flags, including ones that cannot be detected statically (such as ATTR_FALSE_VALUE), is in the official compat configuration reference.
Frequently asked questions
Use it for medium and large apps that cannot be migrated in one go: it lets the app run on Vue 3 while Vue 2 code is still being converted. It is a migration aid, so plan to remove it. Small apps are often faster to migrate directly.
configureCompat() sets runtime flags in the browser. Template flags (the COMPILER_ ones) are applied when templates are compiled, so they go in compilerOptions.compatConfig of your build tool plugin.
With MODE: 3, every feature behaves like Vue 3 unless its flag is set to true. With the default MODE: 2, everything behaves like Vue 2 unless its flag is set to false.