Adminify
An Admin Dashboard based on Vuetify material.
- An Admin dashboard based on Vuetify .
- Data in demo use axios-mock-adapter
- Better Server API is built on AdonisJs .
- Also welcome to Adonis China .






Features
- Vue + Vue Router + Vuex + Axios.
- Material Design Style - Vuetify
- Data Grid with server side
sort
,search
,pagination
and json config.
- Dynamic Form Builder with
text
,textarea
,radios
,checkboxes
,select
,html
input types and json config.
- Built in
localStorage
proxy for any data types.
- Axios Mock with
axios-mock-adapter
- Configurable side menu with json
- i18n with
vue-i18n
Basic
and Main
layouts
- Stylus processor
- And more of your requests.
Getting start
git clone https://github.com/wxs77577/adminify.git
- Copy
src/config.sample.js
to src/config.js
npm install
npm run dev
- Remove
line:6 ~ line:9
in /src/http.js
to speed up page loading if you don't need http mock.
Use cnpm
instead npm
in China
Config
src/config.js
src/menu.js
No more explaination needed right?
Routes
Part of src/router.js
function route(path, file, name, children) {}
[
route('/login', 'Login', 'login'),
route('/error', 'Error', 'error'),
route('/', 'Main', null, [
route('/', 'Home', 'home'),
route('/crud/:resource', 'CrudGrid', 'grid'),
route('/crud/:resource/:id/edit', 'CrudForm', 'edit'),
route('/crud/:resource/create', 'CrudForm', 'create'),
route('/crud/:resource/:id/:action', 'CrudForm', 'action'),
route('/crud/:resource/:action', 'CrudForm', 'indexAction'),
route('/example', 'Example'),
route('/settings', 'Settings'),
route('/theme', 'Theme'),
route('/chat', 'Chat'),
route('/about', 'About'),
]),
{ path: '*', redirect: '/error', query: {code: 404, message: 'Page Not Found.'} }
]
Grid View Config
src/mock/index.js
Grid View Data
src/mock/index.js
src/mock/index.js
mock.onGet('/settings/form').reply(({ params }) => {
return [200, {
"model": {
name: 'Adminify',
logo: 'http://placeimg.com/128/128/any',
date: null,
type: 1,
status: 1,
tags: [],
description: 'An Awesome Site',
intro: '',
},
"fields": {
"name": {label: 'Name'},
"logo": {label: 'Logo', type: 'image'},
"date": {label: 'Created At', type: 'date'},
"type": {label: 'Type', type: 'select', options: [
{text: 'Blog', value: 1},
{text: 'Company', value: 2},
{text: 'Game', value: 3},
]},
"status": {label: 'Status', type: 'radios', width: 'md3', options: [
{text: 'Enabled', value: 1},
{text: 'Disabled', value: 2}
]},
"tags": {label: 'Tags', type: 'checkboxes', width: 'md3', options: [
{text: 'Enabled', value: 1},
{text: 'Disabled', value: 2}
]},
"description": {label: 'Description', type: 'textarea'},
"intro": {label: 'Intro', type: 'html'},
}
}]
})
GitHub