How to source javascript from node_module for Static Site Generation, in nuxt.config.js?

528 Views Asked by At

I am porting an older website into Nuxt. I am relatively new to Nuxt, and am trying to determine how to use nuxt.config.js file properly, for static site generation.

I am attempting to source .js files from npm packages. It is unclear to me from the documentation, which is the correct way to (a) source my Javascript files from node_modules and (b) how to do so properly so that the files run through Webpack, so that we gain the benefits of the Static Site Generation optimization.

It seems that there are numerous options in the nuxt.config.js file:

  • Using the "script" array in the "head" (this appears to be for CDNs, but that is not what I want to do -- I want to source from an npm module in node_modules).
  • There are numerous other arrays: "buildModules" "modules" and "build"
  • Create a "plugin." That seems to have a lot of extra steps.

For example, In Nuxt, I have attempted to source an older version of Bootstrap and jQuery via CDN like this:

head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' },
      { src: 'https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js' }
    ],
}

However, I would like to use npm packages. And in doing so, make sure that it is Static Site Generation friendly.

Questions:

  1. Once I install the npm packages locally, which nuxt.config.js array would I use to get the SSR optimization ("buildModules" "modules" and "build" "plugin")? Any explanation of the difference in these would be most appreciated.
  2. The old site has numerous other npm packages, such as Carousels, etc. How do I refer to the node_modules directory? I've seen the use of ~ but not sure what directory that puts me in. (A code example would be helpful).
  3. Last, there is some custom Javascript. What directory should I put these .js files, and should it be a "buildModules" "modules" and "build" "plugin" or a "script" (in the "head" section)?

Thank you in advance.

0

There are 0 best solutions below