Nuxt 3 is coming.. Discover more about it here!

Docs Examples Resources Blog Video courses
  • English
  • Français
  • Get Started
    • Installation
    • Routing
    • Directory Structure
    • Commands and Deployment
    • Conclusion
    • Upgrading
  • Concepts
  • Features
  • Directory Structure
  • Configuration Glossary
  • Internals Glossary
  • Components Glossary
    • Fetch Hook
    • Head Method
    • Key Property
    • Layout Property
    • Loading Property
    • Middleware Property
    • Transition Property
    • scrollToTop Property
    • Validate Method
    • WatchQuery Property
  • Deployment
Version: v2.15.7
  • English
  • Français
  • Get Started
    • Installation
    • Routing
    • Directory Structure
    • Commands and Deployment
    • Conclusion
    • Upgrading
  • Concepts
  • Features
  • Directory Structure
  • Configuration Glossary
  • Internals Glossary
  • Components Glossary
    • Fetch Hook
    • Head Method
    • Key Property
    • Layout Property
    • Loading Property
    • Middleware Property
    • Transition Property
    • scrollToTop Property
    • Validate Method
    • WatchQuery Property
  • Deployment
Version: v2.15.7

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'
  }
}
Edit this page on GitHub Updated at Mon, Jul 12, 2021

Components Glossary The key Property
Components Glossary The loading Property

Partners

  • Netlify
  • Google Chrome
  • Vercel
  • Strapi
  • Swell
  • Ship Shape
  • Layer0
  • Storyblok
Support Us
A landscape image A landscape image

Discover

  • Our team
  • Design Kit
  • Contact us

Help

  • Resources
  • Chat with us
  • Contribution guide

Support

  • Sustainability
  • Training

Settings

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox monthly.

NuxtJS is an open source framework under MIT license.