6

I have js file called script.js in assets/js. Tried to include in nuxt.config.js like below:

head: {
    title: pkg.name,
    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: '/assets/js/script.js', ssr: false }
      ]
  }

But getting 'GET http://127.0.0.1:3000/assets/js/script.js 404 (OK)'.

Improve this question

4 Answers 4

Reset to default
12

Simply keep your script.js file into static folder, because static folder treat as root folder.

and add the path into nuxt.config.js configuration file like below

script: [
          { src: '/script.js'}
      ]
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This does not work if you use the router to redirect to a page.
4

here is the best way that worked for me

put your script.js file in plugins folder and then go and include it in nuxt.config.js

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '@/plugins/script.js'
  ],

remember that @ in nuxt.js or vue.js means root folder

Improve this answer

2 Comments

how to use it in pages or components?
@JenuelGanawed This gets automatically added to nuxt context object so where ever you access nuxt context object your plugin will be included you can check here nuxtjs.org/docs/directory-structure/plugins
1

In this method, your js files must be in the path static folder and add this code to you *.vue files you want to use

     export default {
head() {
return {
  link: [
    {
      rel: "stylesheet",
      href:
        "/assets/css/bootstrap.css"
    },
  ],
  script: [
    {
      src: "assets/js/bootstrap.js",
      body: true
    },
  ],
    }
  }
Improve this answer

Comments

0

If you have a utility js file, you can add it to utils/ and it will be available globally. Nuxt offical doc

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.