Layouts

Nuxt allows us to create multiple layouts for our projects. For example, imagine that our project needed a sidebar on only the blog page for filtering but not on other pages. Either a default layout or a blog-specific layout for the blog page could be used. Layouts are also used for changing the structure on mobile and desktop views. We can add as many of these layouts as we need.

A layout works as a wrapper with the content inside. One approach could be to create a layout that contains the header and footer, and then the content between could change. This can provide a consistent experience for the user. To work with layouts, we need to add a layouts directory to our project. Then, we’ll add two new files inside: