docs

home	heroImage	actionText	actionLink	footer
true	/logo.svg	Get Started →	/guide/	MIT Licensed | Copyright © 2020 Adrien Beaudouin

Check online demo -> go to admin and use pre-filled login (read only)
Check tutorial CodeSandbox -> use any login (fake writeable API)
Heavily inspired by React Admin made by awesome Marmelab Team

Built on top of Vuetify

Ready-to-go Vuetify UI theme with nice Material Theme by Creative Tim. Fully customizable theme by using your existing Vuetify plugin.

Standalone SPA Admin

Full responsive SPA Admin UI decoupled from backend. Rely on low-level data and auth providers which can pe replaced by your own simply by implementing specific interface compatibility layer.

Minimal code

Bare minimal boilerplate code needed to get your CRUD pages working via Domain Specific Language approach.

High productivity

Immediate quick start by using Vue CLI plugin with additional UI CRUD code generators. Guesser CRUD pages which give you all generated Vue template code for quick starting. YAML driven code generation given a JSON schema available !

Keep control

Integrates seamlessly within your existing Vue CLI plugins. Keep total control of your Vue app by adding your own routes with custom pages, custom store modules, and Vuetify theme as you are used to on Vue CLI base project.

Laravel 8 ready

If you use Laravel 8 as API backend, use official Laravel Admin composer package for even more immediate start from top to bottom. Docker support and Server-side API CRUD code generators included as a bonus !

Respectful and documented

No black magic pitfall, if you know well Laravel and Vue CLI basics, you're ready to go !

All VA components has intellisense integration within VSCode Vetur and all Jetbrains products.

The ultimate alchemy

With combination of Vuetify Admin, code generators as well as Vue.js power, feel the better mix between productivity, nice development experience and limitless customization.

DataTable & Treeview

Full-featured DataTable, including multi-sort, pagination, global search, advanced filters, basic CSV export, bulk actions, live query string context, inline row form edit.

Possibility of total list layout customization thanks to separate data iterator. Draggable treeview for hierarchical data included !

Custom fields

All basic fields and inputs components for various data types: select, autocomplete with resource relations, boolean, number, rich text, etc. TinyMCE 5 as default Wysiwyg.

Create your own fields and inputs simply by extending mixins.

Internationalization

Internationalization support via Vue I18n, with full english and french translations provided.

Even more, translatable resource fields by contextual language selection on each crud page is supported !

Advanced permissions

All specific user roles or permissions can be accessible on every CRUD pages for show/hide specific UI sections. All sidebar menu can be filtered as well as generic resources CRUD operations.

At a glance

1. New resource

src/resources/index.js

export default [
  {
    name: "posts",
    icon: "mdi-post",
    label: "title",
  },
];

2. List page

src/resources/posts/List.vue

<template>
  <v-card>
    <v-card-title>
      <h1>{{ title }}</h1>
    </v-card-title>
    <v-card-text>
      <va-list>
        <va-data-table :fields="fields"></va-data-table>
      </va-list>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  props: ["title"],
  data() {
    return {
      fields: ["title", "body"],
    };
  },
};
</script>

3. Show page

src/resources/posts/Show.vue

<template>
  <va-show-layout :title="title">
    <va-show :item="item">
      <v-card>
        <v-card-text>
          <va-field source="title"></va-field>
          <va-field source="body"></va-field>
        </v-card-text>
      </v-card>
    </va-show>
  </va-show-layout>
</template>

<script>
export default {
  props: ["title", "item"],
};
</script>

4. Create page

src/resources/posts/Create.vue

<template>
  <va-create-layout :title="title">
    <posts-form :item="item"></posts-form>
  </va-create-layout>
</template>

<script>
export default {
  props: ["title", "item"],
};
</script>

Item here is for clone feature needs

5. Edit page

src/resources/posts/Edit.vue

<template>
  <va-edit-layout :title="title">
    <posts-form :id="id" :item="item"></posts-form>
  </va-edit-layout>
</template>

<script>
export default {
  props: ["id", "title", "item"],
};
</script>

6. Form

src/resources/posts/Form.vue

<template>
  <va-form :id="id" :item="item">
    <v-card>
      <v-card-text>
        <va-text-input source="title"></va-text-input>
        <va-text-input source="body" multiline></va-text-input>
        <va-save-button></va-save-button>
      </v-card-text>
    </v-card>
  </va-form>
</template>

<script>
export default {
  props: ["id", "item"],
};
</script>