Choose Layout depending on Screen Sizes

[AllanOricil]

What problem does this feature solve?

Instead of creating responsive layouts using media queries we could upgrade the layout property on pages to set the layout automatically depending on the given breakpoint.

This will make the layouts cleaner and easier to identify and maitain. Another thing is that we could configure the layout based on other properties as well, like browser name.

What does the proposed changes look like?

layout: [
{ 
maxWidth: '576px', 
name: 'small_layout'
},
{ 
maxWidth: '768px', 
name: 'medium_layout'
},
{ 
maxWidth: '992px', 
name: 'large_layout'
},
{ 
maxWidth: '1200px', 
name: 'extra_large_layout'
}
]

if only one layout is needed, the currrent layout strategy still works

layout: 'layout'

[regenrek]

Hi,

why would you create x different layouts for a single app/website? You can control it with css and/or js.

[AllanOricil]

You are right. But wouldn't it make easier if you were able to just switch layouts based on properties? I'm not telling to get rid of the way we usually do, but make another way of doing it. Maybe people who don't like or don't know how to use Media queries would prefer this approach. Maybe instead of having multiple v-ifs inside components to avoid rendering something based on device we could just identify the layout and in that layout the component div wouldn't be rendered right away avoiding multiple v-ifs. Would this approach create problems instead of making things easier?

[regenrek]

Hi

I know what you mean and I also thought about this case. But this approach will lead to too much redundant code.

• Additionally in a best practice you avoid using media queries for element sizes and choose an device independent approach (like using vw and %)
• To hide/show components based on device size I would go for https://github.com/nuxt-community/device-module#readme and dynamic components for example.

Regards

[cantkillemall]

I've been struggling with this for over a week now. I've tried vue-mq as a client-only plugin. It works-ish... I've injected it like thisdiv v-if="$nuxt.$mq === 'xlarge' || $nuxt.$mq === 'xxlarge' ($mq only throws undefined) for my Desktop navbar, and v-else for my mobile navbar, but it always shows the mobile navbar for half a second before updating... not ideal. I'd rather it doesn't show until $mq is defined and renders the correct component. BTW, Vuetify has such a system available, but I don't like Material design 😄 https://vuetifyjs.com/en/features/breakpoints/ but indeed, no SSR

[carsonbird]

Isn't this possible in Nuxt 3 now?

[danielroe]

I think this feature should ideally live in userland, with a Nuxt module. Honestly, I'm not sure it's the right approach. There are some challenges here particularly around server-side rendering, where it's not known what size of screen the user has. And because a layout likely wraps almost everything else, ensuring what the server renders and the client hydrates is going to be very tricky and probably dependent on the circumstances of an individual project.