Pages

A Page is a conceptual grouping for Vue Components used in routing. Pages are not to be imported by other Pages, Components, or Layouts.

A special feature of Pages is that they can benefit from Layouts to automatically add a parent container with common pieces of UI/State that’s shared throughout the application - like Headers and Footers. The Layouts section goes into more detail on this approach.

A Page needs to be added to the Router before it can be previewed within a web browser.

Technical

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

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

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

Adding a Page Using the CLI

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

frontier vue add page

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

Making the Page Accessible

To make the new page accessible, you need to update the router configuration. The router is defined in the router.ts file, which contains an array of route records. For more information on Vue Router, refer to the official documentation.

Example Router Configuration

Here is an example of how to add a new page to the router:

import Vue from 'vue';
import {
  createWebHashHistory,
  createRouter,
  type RouteRecordRaw,
} from 'vue-router';
import SignInView from '@/pages/sign-in';
// Import the new page
import NewPageView from '@/pages/new-page';
export enum RouteNames {
  SignIn = 'sign-in',
  NewPage = 'new-page',
}
export const routes: RouteRecordRaw[] = [
  {
    path: `/${RouteNames.SignIn}`,
    name: RouteNames.SignIn,
    component: SignInView,
    meta: {
      layout: 'default-layout',
      page: {
        title: 'Sign In',
        description: 'This is the sign in page',
      },
    },
  },
  // Add the new page route
  {
    path: `/${RouteNames.NewPage}`,
    name: RouteNames.NewPage,
    component: NewPageView,
    meta: {
      layout: 'default-layout',
      page: {
        title: 'New Page',
        description: 'This is the new page',
      },
    },
  },
];
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
});
export { router as default, router };

Steps to Add a New Page and Make It Accessible

1. Create the Page: Use the CLI to create a new page.

   frontier vue add page

   Copy to clipboard
2. Update the Router: Open the router.ts file and import the new page component. Add a new route record for the page in the routes array.
3. Configure the Route: Add the necessary route configuration, including path, name, component, and metadata.

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