I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API.
To maintain the same website structure, I have broken down my code into components and imported my css files to :
/assets/css/*
I have made the necessary configurations 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'
],
This setup is working perfectly for the css files. However, I encountered challenges when trying to do the same for javascript files in nuxt.config.js.
As a workaround, I moved all my js files to :
/static/js/*
and added the following configuration:
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 },
// List of other js files...
]
If anyone has insights on how to properly import these js files and the best practices to follow in Nuxt.js, your input would be greatly appreciated.
Thank you