Nuxt.js: Include js library in nuxt.config.js with Assets

[MatthieuHPP]

Hi,

I am using Nuxt v 1.0.0.alpha5 and would like to include a js library that is 342 kb.

I can include it via the nuxt.config.js file using the Static directory (static/js/mylib.js), but it does not work with Assets (assets/js/mylib.js), and I would like to use Assets directory to take advantage of its caching capability.

// use of Static, working

  script:[
             {src:'js/mylib.js', type: 'text/javascript'}
        ]

// use of assets, not working
I tried with ./assets too

  script:[
             {src:'~assets/js/mylib.js', type: 'text/javascript'}
        ]

Is it possible ?
Many thanks

Matthieu

[LXVC]

you can do like this:

   build: {
      vendor: ['~assets/js/mylib.js'],
   }

[lifenautjoe]

Trying the solution and getting

These dependencies were not found:
* ~assets/boomerang-v3.6/assets/js/boomerang.min.js in multi vue vue-router vue-meta ~assets/boomerang-v3.6/assets/vendor/jquery/jquery.min.js ~assets/boomerang-v3.6/assets/vendor/popper/popper.min.js ~assets/boomerang-v3.6/assets/vendor/bootstrap/js/bootstrap.min.js ~assets/boomerang-v3.6/assets/js/boomerang.min.js
....

Is this still valid?

[lifenautjoe]

Found the issue.

The solution should be '~/assets/js/mylib.js' not '~assets/js/mylib.js'.

Note the ~/ prefix instead of just ~

[tetreault]

@lifenautjoe @LXVC the above doesn't work for me. here's the snippet from my nuxt.config.js, any ideas?

build: {
    vendor: [
      "~/assets/libs/modernizr.min.js",
      "~/assets/libs/detectizr.min.js",
      "~/assets/libs/jeelizFaceFilter.js",
      "~/assets/libs/JeelizResizer.js"
    ],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    }
  }

If i include CDN hosted src URLs inside script: [] inside head:{} in my nuxt.config.js it works out fine but i'd rather not.

[tetreault]

Nevermind -- here's how I solved it. Move the JS files to the static folder, and then include them in scripts in the head section of nuxt.config.js.

head: {
    title: pkg.description,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [
      {
        src: "libs/modernizr.min.js"
      },
      {
        src: "libs/detectizr.min.js"
      },
      {
        src: "libs/jeelizFaceFilter.js"
      },
      {
        src: "libs/JeelizResizer.js"
      }
    ]
  },

[aligajani]

@tetreault This doesn't give you minification and concat capabilities.

[jartaud]

@aligajani how to get minification and concat capabilites?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.