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;
})

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Nuxt

Nuxt Community Chat Server

31,632 Members

Join

Different components for different types of devices

Different components for different types of devices

Continue the conversation

Nuxt

Continue the conversation

Nuxt

Similar Threads