Currently, I am in the process of developing a Nuxt application utilizing an admin template. While I am well-versed in Vue.js, I am finding the aspect of loading assets within Nuxt.js to be a bit perplexing. I am in the process of converting the admin template pages into Nuxt page components and would like to discuss the email page (which is just one of many pages facing a similar issue).
The base admin page loads various CSS files, some at a global level and others at a page level. I have successfully added the global CSS in the nuxt.config.js file.
/*
** Global CSS in nuxt.config.js
*/
css: [
// long list of global css files
],
As for loading the page-level CSS, I attempted to do so in the following manner:
// pages/email.vue
export default {
head: {
bodyAttrs: {
class:
'vertical-layout vertical-menu-modern content-left-sidebar email-application navbar-sticky footer-static',
'data-open': 'click',
'data-menu': 'vertical-menu-modern',
'data-col': 'content-left-sidebar'
},
script: [
{ src: '/app-assets/js/scripts/pages/app-email.js' },
{ src: '/app-assets/vendors/js/editors/quill/quill.min.js' }
]
},
css: ['~/static/app-assets/css/pages/app-email.css'], // this method is not working
middleware: 'auth'
}
However, when I attempted to add the page-level CSS in this manner, the styles failed to load at all. Surprisingly, when I included the same stylesheet in the global styles within nuxt.config.js, it worked seamlessly.
/*
** Global CSS in nuxt.config.js
*/
css: [
// long list of global css files
'~/static/app-assets/vendors/css/editors/quill/quill.snow.css', //works perfectly
],
Do you happen to have any insights into what may be missing in my approach? Thank you.