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?

Jimmar · Accepted Answer · 2022-04-19 01:15:59Z

9

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

edited Apr 19, 2022 at 1:15

Jimmar

4,4892 gold badges33 silver badges47 bronze badges

answered Apr 8, 2022 at 19:48

vch

7311 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cSharp · Accepted Answer · 2022-07-27 08:26:32Z

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.

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

edited Jul 27, 2022 at 8:26

answered Apr 19, 2022 at 0:01

cSharp

3,1891 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

vue reactivity transform $ref not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related