How to import a Javascript file to Nuxt.js

Question

Im trying to import the following javascript files from a website template to my project. Im not sure where the problem lies.

Im interested to convert this website template to a nuxt.js project.

From what i could gather i need to add

plugins: [ '~plugins/axios', '~plugins/script.js', '~plugins/core.min.js', '~plugins/html5shiv.min.js', '~plugins/pointer-events.min.js', ],

to the nuxt.config.js file.

The projects compiles perfectly but i get the following error:

Nuxt.js Error:

ReferenceError: navigator is not defined

at Object.module.exports.Object.defineProperty.value (plugins/script.js:8:16)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at Object.<anonymous> (.nuxt/index.js:27:14)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at Object.<anonymous> (server-bundle.js:1366:65)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at server-bundle.js:95:18
at Object.<anonymous> (server-bundle.js:98:10)
at evaluateModule (/Users/---/------/projects/---/website-try4/website/node_modules/vue-server-renderer/build.js:5820:21)
at /Users/-----/------/projects/-----/website-try4/website/node_modules/vue-server-renderer/build.js:5878:18
at /Users/-----/----/projects/-----/website-try4/website/node_modules/vue-server-renderer/build.js:5870:14
at Nuxt.renderToString (/Users/----/---/projects/----/website-try4/website/node_modules/vue-server-renderer/build.js:6022:9)
at P (/Users/---/---/projects/---/website-try4/website/node_modules/pify/index.js:49:6)
at Nuxt.<anonymous> (/Users/---/---/projects/---/website-try4/website/node_modules/pify/index.js:11:9)
at Nuxt.ret [as renderToString] (/Users/--/---/projects/---/website-try4/website/node_modules/pify/index.js:72:32)
at Nuxt._callee2$ (/Users/---/---/projects/---/website-try4/website/node_modules/nuxt/dist/nuxt.js:2076:25)`

I can provide more information if you need.

What else should I be doing to import these Javascript files properly?

Thanks a bunch

neetoch · Accepted Answer · 2017-09-04 08:09:13Z

1

Not all javascript files should be included through plugins in the nuxt.config.js.
Only Vue plugins should.

The error you get is because you want to execute client side code on the server and NodeJS (unlike a browser) doesn't have a navigator property.

To fix this:
Try to use axios only on places you need it (through an import or require)
example:
https://nuxtjs.org/guide/routing#middleware

Put the other scripts in your head or at the bottom of your body tag in the app.html https://nuxtjs.org/guide/views#document

To extend the html template, create a app.html at the root of your project. The default template is:

 <!DOCTYPE html>
  <html {{ HTML_ATTRS }}>
    <head>
        {{ HEAD }}
    </head>
    <body {{ BODY_ATTRS }}>
      {{ APP }}
    </body>
  </html>

answered Sep 4, 2017 at 8:09

neetoch

416 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to import a Javascript file to Nuxt.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related