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`? https://nuxtjs.org/docs/2.x/directory-structure/plugins#the-plugins-property — kissu, Aug 18 '21 at 11:37
Why do you want it in the header? It's not really optimized. — kissu, Aug 18 '21 at 12:04
If you really want it in `head`, look at this answer: https://stackoverflow.com/a/67535277/8816585 — kissu, Aug 18 '21 at 12:05

score 1 · Answer 1 · answered Aug 19 '21 at 09:43

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 }
    ]
  }
}

score 0 · Answer 2 · answered Aug 18 '21 at 11:38

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 '21 at 11:38

lovis91

1,988
2
14
24

i tried the plugin property but its not inserting the script in header i will try the static directory – Marco Aug 18 '21 at 11:47

score 0 · Answer 3 · edited May 13 '22 at 09:58

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 '22 at 09:58

Eric Aya

69,473
35
181
253

answered May 13 '22 at 01:57

Samtech

339
5
18

Nuxt js How to import local js files from assets?

3 Answers3