Steps to install jQuery in Nuxt.js
P粉755863750
P粉755863750 2023-11-06 16:41:50
0
1
579

Although I tried adding jQuery to my project, I encountered an error saying it was undefined.

plugins: [ { src: '~/plugins/js/svgSprite.js', mode: 'client' }, { src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' }, { src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' }, { src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' }, <-- 给我报错 { src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' }, { src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' }, { src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' }, { src: '~/plugins/js/theme.js', mode: 'client' } ],

Why this happens, obviously I have declared jQuery before bootstrap-select.

P粉755863750
P粉755863750

reply all (1)
P粉277824378

I do not recommend adding jQuery to Nuxt projects.


But if youreallywant to add it, you can follow the steps below:

  • Useyarn add jqueryInstall it
  • Add the following to yournuxt.config.jsfile
import webpack from 'webpack' export default { // ... build: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] }, }
  • Make sure your.eslintrc.jsfile has the following content
module.exports = { // ... env: { // ... commonjs: true, jquery: true }, }

Then, you can use it like this inmethodor similar

$("h2").addClass("tasty-class")
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!