CODEWITHSUNDEEP
javascriptcssvue.jsimportnuxt.js
Antoine Kurka
Antoine Kurka

Reputation: 322

How to import .js files from static in Nuxt.js

I'm moving my html/css/js website to Nuxt.js to get it updated automatically from an API.

I want to keep the same website so I splitted my code in components, imported my css to :

/assets/css/*

and added this in nuxt.config.js

css: [
    '~/assets/css/bootstrap.min.css',
    '~/assets/css/all.min.css',
    '~/assets/css/simple-line-icons.css',
    '~/assets/css/slick.css',
    '~/assets/css/animate.css',
    '~/assets/css/magnific-popup.css',
    '~/assets/css/style.css'
  ],

and it's working properly like this.

I tried to do the same with js and scripts in nuxt.config.js but it's not working like that.

So I moved all my js files to :

/static/js/*

and added this in the config :

scripts:[
      { src: '/js/jquery-1.12.3.min.js', body: true },
      { src: '/js/jquery.easing.min.js', body: true },
      { src: '/js/jquery.waypoints.min.js', body: true },
      { src: '/js/jquery.counterup.min.js', body: true },
      { src: '/js/popper.min.js', body: true },
      { src: '/js/bootstrap.min.js', body: true },
      { src: '/js/isotope.pkgd.min.js', body: true },
      { src: '/js/infinite-scroll.min.js', body: true },
      { src: '/js/imagesloaded.pkgd.min.js', body: true },
      { src: '/js/slick.min.js', body: true },
      { src: '/js/contact.js', body: true },
      { src: '/js/validator.js', body: true },
      { src: '/js/wow.min.js', body: true },
      { src: '/js/morphext.min.js', body: true },
      { src: '/js/parallax.min.js', body: true },
      { src: '/js/jquery.magnific-popup.min.js', body: true },
      { src: '/js/custom.js', body: true },
    ]

Do someone have any idea how to import them properly and the best method to use in Nuxt.js ?

Thank you

Upvotes: 2

Views: 5968

Answers (1)

Harry
Harry

Reputation: 328

You can either move your scripts node (renamed script) in the head node of your nuxt.config.js file (mostly for external resources, every key/value in each script's object is an attribute) or use Nuxt's plugins as per https://nuxtjs.org/docs/configuration-glossary/configuration-plugins and https://nuxtjs.org/docs/directory-structure/plugins/.

Upvotes: 0

Related Questions