Want to take a look at our new docs? Our new docs are now in beta. Have fun!

The layout Property

Every file (first level) in the layouts directory will create a custom layout accessible with the layout property in the page component.

  • Type: String or Function (default: 'default')

Use the layout key in your pages components to define which layout to use:

export default {
  layout: 'blog',
  // OR
  layout(context) {
    return 'blog'

In this example, Nuxt.js will include the layouts/blog.vue file as a layout for this page component.

Check the demonstration video to see it in action.

To understand how the layouts work with Nuxt.js, take a look at the layout documentation.


Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us