Layouts

A Layout is a conceptual grouping given to components which serve the purpose of rendering re-usable pieces of UI shared by many pages. An easy example is the header and footer information displayed on many sites: though the body of the page changes often, those elements remain the same.

A Layout allows us to define the common elements while leaving a slot (router-view) to inject the actual body of the Page.

Technical

To get a Page to use a Layout, edit its definition in the router.ts file and add the following option:

meta: {
  layout: '<layout-name>',
}

For example:

routes: [
  {
    path: '/',
    name: 'home',
    component: [...],
    meta: {
      layout: 'two-column',
    },
  },
]

Above, the Layout refers to a component within the src/layouts directory called two-column.

A Layout must contain a router-view to display the Page within the area designated for its content.

Each generated Layout is contained within its own sub-folder within the src/layouts directory. The directory contains the following files which each carry out a specific role in developing a Layout:

  • layout.vue: This contains the Vue template markup used to implement the structure and layout of a Layout. It is a mix of HTML and special Vue syntaxes which allow declarative databinding and structural manipulation.
  • layout.ts: This contains the controller which provides the procedural code-behind logic needed to add integrations to a Layout. Through this file, you may expose data and handle events generated by Layout elements.
  • layout.scss: This contains the stylesheet to be applied to the Layout - and that Layout only. The styles within this file are scoped, meaning they cannot be used to target any elements except those defined directly within the layout.vue template file.

Scoped CSS may seem weird at first because regular CSS operates with global impunity, however it is a great approach for compartmentalizing styles so they do not jump their intended scope and affect other elements. Global level styles can be added in the Theme directory.

  • layout.spec.ts: This contains the unit-level tests for the Layout. Read the testing section for more details about writing tests.

Adding a Layout Using the CLI

To add a layout to your project using the CLI, use the following command:

frontier vue add layout

This command will generate a new Layout with the necessary files and structure, as described above. The Layout will be contained within its own sub-folder in the src/layouts directory.

Adding Components to a Layout

To add components to a Layout, such as a header or footer, follow these steps:

  1. Create the Component: First, create the component (e.g., AppFooter.vue) in the src/components directory.
  2. Import the Component: Import the component into the Layout's .vue file.
  3. Use the Component: Add the component to the Layout's template where you want it to appear.

Example of a Barebones Layout

Here is a barebones example of a Layout component:

src/layouts/default-layout.vue

<template>
  <div>
    <header>
      <!-- Header content -->
    </header>
    <slot>
      <!-- Page content rendered here -->
    </slot>
    <AppFooter />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import AppFooter from "@/components/AppFooter.vue";
@Component({
  name: "default-layout",
  components: {
    AppFooter,
  },
})
export default class DefaultLayout extends Vue {}
</script>
<style scoped>
/* Layout styles */
</style>

src/components/AppFooter.vue

<template>
  <footer>
    <!-- Footer content -->
    <p>Footer content here</p>
  </footer>
</template>
<script lang="ts">
export default {
  name: "AppFooter",
};
</script>
<style scoped>
/* Footer styles */
footer {
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: center;
}
</style>

Steps to Add a New Layout and Make It Accessible

  1. Create the Layout: Use the CLI to create a new layout.
    frontier vue add layout
  2. Update the Router: Open the router.ts file and add the layout to a route's meta information.
  3. Configure the Layout: Add the necessary layout configuration, including importing and using any common components like headers or footers.

By following these steps, you can create a new layout and make it accessible within your application. For more information on routing and layouts, visit the Vue Router documentation.

Edit this page on GitHub
Table of Contents