Different components for different types of devices

Hello. If I want the component to be rendered only cliend-side, I add a suffix .client. Is it possible to come up with something similar depending on the type of device?
P.S. Now I'm using @nuxtjs/device to detect the device.

import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})

import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})

Nuxt•4y ago•

4 replies

Yuri

Different components for different types of devices

import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})

import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})

Different components for different types of devices

Similar Threads

Different components for different types of devices

Similar Threads

Similar Threads

Similar Threads