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.
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>