vue reactivity transform $ref not defined

Question

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?

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