Search code examples
jqueryvue.jsnuxt.js

How to use JQuery in Nuxt.js

i want to use JQuery in function computed() in my component:

computed: {
    bgStyle() {
        var $bg_wr = $('.bg-wr'),
    }
}

For this in nuxt.config.js i tried to connect JQuery:

head: {
   script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' },
    ]
}

But it doesn't work. I get error '$ is not defined'. What i do wrong?

Solution

  • As stated above, you should not use jQuery with Vue/Nuxt because it defeats the whole purpose of having a declarative framework vs using an imperative library (jQuery).

    The ecosystem is even bigger without jQuery, and much more maintained/flexible.

    If you really want to use jQuery, you could probably follow this kind of tutorial.
    Then, use your function into a method, but I recommend not to.