Nuxt•3y ago

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

3 Replies

Unknown User•3y ago

Message Not Public

YuriOP•3y ago

Now I do just that. But perhaps there is a more correct option, by analogy with the suffix in the component file name (.client or .server) or the prefix in the component name (Lazy for async component).

Unknown User•3y ago

Message Not Public

Gaming

Programming

Different components for different types of devices

Did you find this page helpful?