Are Layouts In Nuxt.js Actually Useful? What Are The Benefits?

As far as I understood, layouts only help to get rid of importing a component and having to wrap every page in a layout component. With the auto import feature you can even get rid

Solution 1:

This post in /r/Nuxt is pretty interesting: https://www.reddit.com/r/Nuxt/comments/iy7a9u/eli5_difference_between_components_pages_and

I'd quote some interesting replies:

Layouts: if you have some components, which you know you want to use on several pages (like the header and footer, for example), you can just import and add these into a layout, then use this layout on the pages that require it. No need to separately import and add those mandatory components into each page separately and there's less duplication of code. Also any css definitions which should apply only to specific pages can be put in there, instead of having to add them to each page/component separately.

Layouts are really just top level wrapper components that are really helpful to keep a lot of the boilerplate code in one spot instead of inserting it into each page. For instance, I could have a blog layout with a sidebar on the right, breadcrumbs on top and a widget on the left. I would create a "blog.vue" so that I can keep my pages DRY.

TLDR: you should use Layouts as the top level wrappers to keep things DRY. They are not supposed to have any props from Pages because they are wrapping them. Of course, a component could also make the job on this regard but it's a bit more verbose. There is no performance benefit IMO (everything is a component), meanwhile Layouts are more semantic.