when new to Nuxt.js, learning by developing a pilot project where in two different route, I included two different demo templates.
For that, I needed different js libraries and css to be included!
Here is how I did include into nuxt.js file!
link: [
// vendor
{
rel: ‘stylesheet’,
href: ‘/vendor/css/bootstrap.min.css’
},
{
rel: ‘stylesheet’,
href: ‘https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'
},
{
rel: ‘stylesheet’,
href: ‘https://use.fontawesome.com/releases/v5.1.0/css/all.css'
},
{
rel: ‘stylesheet’,
href: ‘https://fonts.googleapis.com/css?family=Slabo+27px'
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/bootstrap.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/owl.carousel.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/owl.theme.default.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/vendor/css/style.css’
},
// retail
{
rel: ‘stylesheet’,
href: ‘/retail/css/bootstrap.min.css’
},
{
rel: ‘stylesheet’,
href: ‘/retail/style.css’
},
{
rel: ‘stylesheet’,
href: ‘//fonts.googleapis.com/css?family=Lato:400,700%7CMontserrat:300,400,600,700’
},
{
rel: ‘stylesheet’,
href: ‘/retail/icons/fontawesome/css/fontawesome-all.min.css’
},{
rel: ‘stylesheet’,
href: ‘/retail/icons/Iconsmind__Ultimate_Pack/Line%20icons/styles.min.css’
},
],
script:[
// vendor
{ src: ‘vendor/js/jquery-3.3.1.slim.min.js’, body: true },
{ src: ‘vendor/js/popper.min.js’, body: true },
{ src: ‘vendor/js/bootstrap.min.js’, body: true },
{ src: ‘vendor/js/owl.carousel.min.js’, body: true },
{ src: ‘vendor/js/custom.js’, body: true },
{ src: ‘vendor/js/custom-vendor.js’, body: true },
{ src: ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', body: true },
// retail
{ src: ‘retail/js/libs/jquery-3.3.1.min.js’, body: true },
{ src: ‘retail/js/libs/popper.min.js’, body: true },
{ src: ‘retail/js/libs/bootstrap.min.js’, body: true },
{ src: ‘retail/js/navigation.js’, body: true },
{ src: ‘retail/js/jquery.flexslider-min.js’, body: true },
{ src: ‘retail/js/jquery-asRange.min.js’, body: true },
{ src: ‘retail/js/circle-progress.min.js’, body: true },
{ src: ‘retail/js/afterglow.min.js’, body: true },
{ src: ‘retail/js/script.js’, body: true },
{ src: ‘retail/js/script-dashboard.js’, body: true }
]
Here is my directory Structure of Pages:
pages
| retail
| bank.vue
| index.vue
| info.vue
| vendor
| index.vue
| index.vue
Here is my directory Structure of Static folder where I included all my js libraries and css files:
static
| retail
| css
….
| icons
….
| images
….
| js
| jquery-3.2.1.slim.min.js
….
| style.css
|
| vendor
| css
….
| images
….
| js
| jquery-3.3.1.slim.min.js
….
| style.css
….
Thus when expecting to go ‘/vendor’ and load vendor stuffs, and same as the ‘/retail’.
But whenever page ‘vendor’ or ‘retail’ any of one page loads, all the javascript libraries are called in the following route:
Request URL: http://localhost:3000/vendor/vendor/js/jquery-3.3.1.slim.min.js
where it should be called in
Request URL: http://localhost:3000/vendor/js/jquery-3.3.1.slim.min.js
not /vendor/vendor/…
Thus it produces 404 Not Found error. How do I solve it ?
Solution :
You should use absolute path in the src tag then. E.g.
{ src: ‘/vendor/js/jquery-3.3.1.slim.min.js’, body: true },
PS its bad idea to mix jquery and vue/nuxt