I'm facing a challenge with my Nuxt 3 application where I need to dynamically load different Header components for Mobile and Desktop devices.
I have created Header.vue and MobileHeader.vue for this purpose, and want to display them based on the device type.
Below is my layout code:
<template>
<MobileHeader v-if="isMobile" />
<Header v-else />
<slot />
</template>
<script setup>
const MobileHeader = defineAsyncComponent(() => import('~/components/layout/MobileHeader.vue'));
const Header = defineAsyncComponent(() => import('~/components/layout/Header.vue'));
</script>
The Header.vue and MobileHeader.vue files both come with their individual SCSS stylesheets imported as shown below:
<style lang="scss">
@import "/assets/scss/components/layout/mobile-header";
</style>
The issue here is that both mobile-header.scss and header.scss files are being loaded on the page regardless of which component is displayed. I only want each file to be loaded when its respective component is rendered.
Any suggestions on how to resolve this?
Note: I've disabled component autoloading in my nuxt.config.ts
Also, I attempted to import components in the standard way but ran into issues.
import MobileHeader from '~/components/layout/MobileHeader.vue';