VueJS: Error - Uncaught ReferenceError: $ is not defined

Question

I have some issues in my Vue Code I want to create a ScrollToTop Button in Vue but I get this Error message in console:

Uncaught ReferenceError: $ is not defined

My Code :

export default {
  data() {
    return {
      isExample: false,
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (window.scrollY > 120) {
         this.isExample = true,
         $('.example-1').addClass("is-close"),
      } else if (window.scrollY < 120) {
         this.isExample = false,
         $('.example-1').removeClass("is-close")
      }
    }
  }
}

The error is telling you that you are using jQuery widouth the importing the library.. using jQury inside vue is not the right way to go — Stefan Avramovic, Dec 26 '20 at 19:11
There is really no reason why you’d want to use jQuery with VueJS. — Terry, Dec 26 '20 at 19:12

score 0 · Answer 1 · answered Dec 26 '20 at 19:11

0

Try to import jQuery in the component, or define $ globally in your application:

import $ from 'jquery'

Also, you can do this in js:

document.getElementsByClassName('example-1')

answered Dec 26 '20 at 19:11

Majed Badawi

27,616
4
25
48

1

Please don't post answers on obviously off topic/bad questions! [See: **Should one advise on off topic questions?**](//meta.stackoverflow.com/q/276572) – double-beep Dec 26 '20 at 19:13
@double-beep OP is trying to use ``jquery`` in their ``vue`` application, so the problem is different than that marked as duplicate to – Majed Badawi Dec 26 '20 at 19:15

VueJS: Error - Uncaught ReferenceError: $ is not defined

1 Answers1