Quick Start

After completing the Installation section, configure your environments and review the examples by running the demo application. You can open a support request for sections you do not understand from the documentation, or browse previously asked questions on the Github Discussions page.

Introduction to CRUD Pages

Step 1 is to identify the backend resources you want to manage.

Go to src/resources/index.js.

export default [
  {
    name: "companies",
    icon: "mdi-city",
    label: "name",
  },
  {
    name: "users",
    icon: "mdi-account",
    permissions: ["admin"],
  },
  {
    name: "roles",
    icon: "mdi-account-key",
    label: "name",
    permissions: [
      { name: "admin", actions: ["show","list","edit","delete", "create"] },
    ],
    actions: ["show","list", "edit", "delete", "create"],
  }
];

Step 2 is to define CRUD pages for each resource, following this naming convention:

src/resources/{Resource}/{action}.vue.

Actions

  • List.vue
  • Create.vue
  • Edit.vue
  • Form.vue
  • Show.vue

For example, for the List request, create a file named List.vue under a src/resources/Users/ folder.

List.vue

src/resources/Users/List.vue

Users List

Users Settings

<template>
  <div>
    <v-card>
      <v-card-text>        
        <va-list 
            :fields="fields"
            :filters="filters"
            :disable-global-search="false"
            :disable-actions="false"
          >
          <va-data-table-server>
          </va-data-table-server>
        </va-list>
      </v-card-text>
    </v-card>
  </div>
</template>
<script>
export default {
  props: ["resource"],
  data() {
    return {
      filters: [
        { source: "firstname", label: this.$t("users.firstname"), col: 2 },
        { source: "lastname", label: this.$t("users.lastname") },
        { source: "email", label: this.$t("users.email") },
        { source: "active", label: this.$t("users.active"), type: "boolean" },
      ],
      fields: [
        {
          source: "firstname",
          label: this.$t("users.firstname"),
          sortable: true,
          width: "5%"
        },
        {
          source: "lastname",
          label: this.$t("users.lastname"),
          sortable: true,
        },
        {
          source: "email",
          label: this.$t("users.email"),
          sortable: true,
        },
        {
          source: "active",
          label: this.$t("users.active"),
          sortable: true,
        }
      ],
    };
  },
};
</script>

Show.vue

src/resources/Users/Show.vue

Users Show

<template>
  <v-card>
    <v-card-text>
      <va-show-layout :title="title">
        <va-show :item="item">
          <v-row justify="left">
            <v-col cols="4">
              <v-table density="compact" class="va-show-table">
                <tbody>
                  <tr>
                    <td><b>{{ $t('users.firstname') }}</b></td>
                    <td>
                      <va-field
                        source="firstname"
                      ></va-field>
                    </td>
                  </tr>
                  <tr>
                    <td><b>{{ $t('users.lastname') }}</b></td>
                    <td>
                      <va-field
                        source="lastname"
                        :label="$t('users.lastname')"
                      ></va-field>
                    </td>
                  </tr>
                  <tr>
                    <td><b>{{ $t('users.email') }}</b></td>
                    <td>
                      <va-field
                        source="email"
                        :label="$t('users.email')"
                      ></va-field>
                    </td>
                  </tr>
                  <tr>
                    <td><b>{{ $t('users.active') }}</b></td>
                    <td>
                      <va-field
                        source="active"
                        type="boolean"
                      ></va-field>
                    </td>
                  </tr>
                  <tr>
                    <td><b>{{ $t('users.createdAt') }}</b></td>
                    <td>
                      <va-field
                        source="createdAt"
                        :label="$t('users.createdAt')"
                      ></va-field>
                    </td>
                  </tr>
                </tbody>
              </v-table>
            </v-col>
          </v-row>
        </va-show>
      </va-show-layout>
    </v-card-text>
  </v-card>
</template>
<script>
export default {
  props: ["title", "item"],
};
</script>
This documents is available for subscribers only

Get Full Accesss