<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:
You can use kebab-case
or PascalCase
in the layout name.
Inside layouts/about.vue
, create your HTML layout around a <slot />
tag:
layouts/about.vue
<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:
pages/about.vue
<template>
<Layout name="about"> That's my About page </Layout>
</template>
Your page will inherit all the layouts/about.vue
components and styles.
If you use the <Layout>
component in the root app.vue
file, the layout will be applied to every page.