CODEWITHSUNDEEP
javascriptjqueryvuejs2nuxt.js
wonder95
wonder95

Reputation: 4255

How to incorporate custom theme js files into Nuxt

I am attempting to use a purchased Bootstrap theme (because I am design challenged) into a Nuxt site. I have managed to get all of the scss/css files included, but I'm having problems finding a way to get the custom .js files to be added as well. The theme itself uses jQuery, and the two files are all jQuery functions. I've added bootstrap-vue and jQuery from npm, and I've tried adding the files in the script item in the head section in nuxt.config.js like so using theassets` directory;

head{
    script: [
      { src: '~assets/js/min/plugins.min.js' },
      { src: '~assets/js/min/custom.min.js' },
      { src: '~assets/js/min/modernizr.min.js' },
    ],
}

and like so using the static directory

head{
    script: [
      { src: 'js/min/plugins.min.js' },
      { src: 'js/min/custom.min.js' },
      { src: 'js/min/modernizr.min.js' },
    ],
}

but either way, I keep getting a jQuery is not defined error.

Is there another way to load these files so that they have access to jQuery? Search results seem to indicate that maybe I should use a plugin, but I'm not sure how to do that just to add a local js file.

Upvotes: 0

Views: 964

Answers (1)

Merc
Merc

Reputation: 4560

Maybe you have just a / missing? Assuming you have this folder sturcture:

/static/js/modernizr-custom.js

You could include it:

head: {
  ...
  script: [
    { src: '/js/modernizr-custom.js' }
  ]
}

Does this solve your problem?

Also it is of course mandatory that if your plugin.js is using jQuery that you actually load jQuery.

To do that, just include jQuery in the same way to your scripts in nuxt.config.js:

head: {
  ...
  script: [
    { src: '/js/jquery.min.js' },
    { src: '/js/plugin.js' }
  ]
}

This means you have to download jquery and put it into your static directory. Alternatively you could use a CND to load jquery from. (This makes sense, because other pages might have loaded jquery from the same cdn and you have it already cached).

{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js }

Upvotes: 2

Related Questions