Vue backoffice library

# Setup

This page will explain how to create a basic entity in the backoffice. For an entity in the backoffice you need several things:

This page will explain the concept of a creating all the pages for an entity.

WARNING

This page assumes you’ve already read the Components Basics (opens new window) and understand Scoped Slots (opens new window).

# Pages

As mentioned the page structure in the backoffice corresponds with the routes. For example:

pages/
├── customers.vue
└── customers/
    ├── customerId/
    │   ├── contacts/
    │   ├── contacts.vue (new nested route)
    │   └── index.vue
    └── new/
        └── index.vue

Nested routes

As of v1.0.0 the index.vue inside an entity can not be used anymore. Instead, rename the file to <entity>.vue (without that brackets) and it should be placed in the pages-folder directly

# Routes

  • customers.vue will create route /customers
  • customers/_customerId/index.vue will create route /customers/:customerId (customerId is available as a route param)
  • customers/new/index.vue will create route /customers/new

TIP

When you use this convention, the useEntity-composition will automatically determine the entity for a page. In this example the entity will be customers.

# Components

There are components that will help you create the recommended structure. Most of them are build based on the Data Provider-pattern (opens new window) in Vue or Provider-pattern (opens new window) in React. These components will load data for you and make the data available through the concept of scoped slots (opens new window).

# Page

Each entity-page requires translations. When you use the routes convention, the useEntity composition will automatically determine the entity for a page.

Example 
<Page>
  <template #default="{ title, url, entityId, icon }">
    <-- This scoped slot has all the information for the `ListView`, provided by `useEntity` -->
  </template>
</Page>

Component documentation

All the props and slots are documented in the Page-component

TIP

The Page has only a default-slot. The NuxtChild is automatically added to the Page

# ListView

The ListView loads all the data in a pre-defined structure for the vue-good-table. The Listview will load all the required metadata (filters, actions and columns) via the /metadata-call. After that call all data is loaded via the /search-call in the API.

This ListView is only placed on the "main" route

<Page>
  <template #default="{ title, url, entityId, icon }">
    <!-- This `ListView` is  corresponding with the entity on the route --> 
    <ListView :icon="icon" :title="title" :active-id="entityId" :title="title" />
  </template>
</Page>

Component documentation

All the props and slots are documented in the ListView-component

# Entity

This Entity is only placed on a detail page where the entity is loaded or created! This component will handle all CRUD-actions for you.

Component documentation

All the events, props and slots are documented in the component

# Status codes

A list with default status codes can be found here.

# CLI

In the future we would like a script (for example with Hygen.io (opens new window)) that automatically creates all the required components and pages for you based on the above implementation.

← Conventions →