vue reactivity transform $ref not defined

user_16627614 0
Viewed 649

According to this page in the docs, macros should be

globally available and do not need to be imported when Reactivity Transform is enabled

I've explicitly opted-in the reactivity transforms in my vue config in accordance with the docs here:

// vue.config.js
    config.module.rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })

But I am getting the '$ref' is not defined from eslint. I think I need to enable it somwhere so that eslint understands it's a global macro, but I can't find anything about it in the docs.

What am I missing?

vue.js
2 Answers

I managed to solve this by adding this to .eslintrc,js

globals: {
  $ref: 'readonly',
  $computed: 'readonly',
  $shallowRef: 'readonly',
  $customRef: 'readonly',
  $toRef: 'readonly'
}

...and this to global.d.ts

/// <reference types="vue/macros-global" />
user_166276140

If you are not already using .eslintrc and don't want to create one, alternative solution is to add

"types": [...  "vue/ref-macros"]

in tsconfig.json -> compilerOptions.

Another solution is to add /// <reference types="vue/macros-global" /> to the top of your src/env.d.ts file.

user_149360010
Related