Nuxt js How to import local js files from assets?

Question

I tried all the ways to import the JS file and when i tried to navigate the script from the view source code it gives error "/* script not found */" .
i need to know what is the correct way to import local js scripts .
below is the nuxt.config.js file .

head: {
  title: 'admin',
  htmlAttrs: {
    lang: 'en'
  },
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '' },
    { name: 'format-detection', content: 'telephone=no' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ],
  script: [
    {
      type: 'text/javascript',
      src: './assets/js/dashboard.js'
    },
    {
      type: 'text/javascript',
      src: '~/assets/plugins/charts-c3/plugin.js'
    },
    {
      type: 'text/javascript',
      src: '@/assets/plugins/maps-google/plugin.js'
    },
    {
      type: 'text/javascript',
      src: '/assets/plugins/input-mask/plugin.js'
    }
  ],
},

Did you tried importing it in plugins rather than script? nuxtjs.org/docs/2.x/directory-structure/… — kissu
– kissu, Commented Aug 18, 2021 at 11:37
Why do you want it in the header? It's not really optimized. — kissu
– kissu, Commented Aug 18, 2021 at 12:04
If you really want it in head, look at this answer: stackoverflow.com/a/67535277/8816585 — kissu
– kissu, Commented Aug 18, 2021 at 12:05

kissu · Accepted Answer · 2021-08-19 09:43:19Z

1

You can use the plugins key to import it globally to your Nuxt app (be careful of performance issues tho)

nuxt.config.js

export default {
  plugins: ['~/plugins/vue-tooltip.js']
}

More info available here: https://nuxtjs.org/docs/2.x/directory-structure/plugins#the-plugins-property

If you want to use some 3rd party scripts that should be available in the header (which is not the case from the code you shared so far), you could look into this answer

nuxt.config.js

export default {
  head: {
    script: [
      { hid: 'stripe', src: 'https://js.stripe.com/v3/', defer: true }
    ]
  }
}

answered Aug 19, 2021 at 9:43

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

Comments

lovis91 · Accepted Answer · 2021-08-18 11:38:34Z

0

Maybe take a look at Nuxt plugin property

You can use the script property for externally available scripts (try to put it in your static directory and add it like it : ./my-scripts.js

answered Aug 18, 2021 at 11:38

lovis91

2,1692 gold badges16 silver badges26 bronze badges

1 Comment

Marco Over a year ago

i tried the plugin property but its not inserting the script in header i will try the static directory

Eric Aya · Accepted Answer · 2022-05-13 09:58:47Z

0

I am using Nuxt v3 RC and updating nuxt.config.js did not help when using NuxtLayout. I had to add the head to the default.vue layout to get external libraries to work.

edited May 13, 2022 at 9:58

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered May 13, 2022 at 1:57

Samtech

3396 silver badges19 bronze badges

Collectives™ on Stack Overflow

Nuxt js How to import local js files from assets?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related