<Layout> component

Vulmix allows you to create multiple layouts for your application. You can use the <Layout> component to wrap your page content with a layout.

Creating a layout

Say that you want to create a layout for the "about" page. Simply create an about.vue file inside the layouts folder:

Inside layouts/about.vue, create your HTML layout around a <slot /> tag:

<template>
  <MyNavbar />

  <slot />

  <MyFooter />
</template>

Using the <Layout> component

In the pages/about.vue, wrap the content inside a <Layout> component, passing the layout name as a prop:

<template>
  <Layout name="about">
    That's my About page
  </Layout>
</template>

Your page will inherit all the layouts/about.vue components and styles.