I have a multiplatform Nuxt 2.15 project with the following structure:
assets/platform1/... //contains fonts, images and config files
assets/platform2/...
components/platform1SpecificComponent.vue
components/platform2SpecificComponent.vue
components/sharedComponent.vue
layouts/platform1/...
layouts/platform2/...
components/platform1SpecificPage.vue
components/platform2SpecificPage.vue
components/sharedPage.vue
I've wrote the following plugin to dynamically register different platform's components unders the same name to be able to reuse most of my pages:
export default ({ store }) => {
const config = store.state.platform.config
Vue.component('NewsCard', () => import(`@/components/pages/news/${config.news.cardComponent.name}`))
}
The problem that after platform1 build, output dir contain assets from platform2 which increases size. At the same time sass or vue loader tries to parse style of vue template's part for components that are not used and not referenced in platform1, throwing errors about missing sass variables...
I know that nuxt allows to define ignore property in nuxt.config.json (or .nuxtignore) but that only works for pages and layouts...
I tried to configure webpack rules by modifiying nuxt.config.js extend property:
const fontsLoader = config.module.rules.find(i => String(i.test) === String('/\\.(woff2?|eot|ttf|otf)(\\?.*)?$/i'))
fontsLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
and actually that removed fonts from dist folder but it started to throw warnings: that these files doent have appropriate webpack loader. The same behaviour I observed when tried to exclude specific vue components from vue-loader. So doesnt seem like a good solution after all..
Becides, the same approach didnt work for images inside assets folder:
const imgLoader = config.module.rules.find(i => String(i.test) === String('/\\.(png|jpe?g|gif|svg|webp|avif)$/i'))
imgLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
all the images are still added to dist...
Is there a way to tell nuxt (or webpack via nuxt config) to ignore specific folders with fonts and images under the /assets folder and specific vue components that are not pages or layouts?