'vue reactivity transform $ref not defined

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


Solution 1:[1]

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" />

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jimmar
Solution 2 cSharp

Related Questions