hero

Vuetify Admin

🚀 Integrate Vue-powered Admin Framework

Get Started →

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

demo

vuetify

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.

decoupled

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.

code

Minimal code

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

rad

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 !

control

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

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 !

documented

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.

alchemy

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

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 !

customizable

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.

i18n

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 !

permissions

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",
  },
];
1
2
3
4
5
6
7

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 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>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Live tutorial preview