How can I use layouts with Vue Router?

How can I use layouts with Vue Router?

You can use layouts in Vue Router by creating a layout component and using it in your route definitions.

Can you show me an example of a layout component?

Sure! Here's a simple layout component:

<template>
  <div>
    <header>My Header</header>
    <router-view></router-view>
    <footer>My Footer</footer>
  </div>
</template>

How do I apply this layout to specific routes?

You can apply the layout by wrapping your route components in the layout component like this:

const routes = [
  {
    path: '/about',
    component: About,
    meta: { layout: 'MyLayout' }
  }
];

What if I want different layouts for different routes?

You can define multiple layouts and use route meta fields to specify which layout to use for each route.