Vuetify Admin offers powerful generators commands that can considerably accelerate admin development. That is particularly useful as VA uses a highly customizable Vue templating development approach rather than configuration oriented development (i.e. develop UI on a full JSON or YAML file as EasyAdmin(opens new window) do) which tends to be harder to extend.
Thanks to all resource-aware VA components, the DSL approach helps to reduce many boilerplate code but it's still not as efficient than writing you UI on YAML file. That's here the generators comes in. You write Admin UI on YAML format, by following a JSON schema validator(opens new window), and then you generate all API code and Vue templates from it. So it embraces the initial high productivity of YAML development and maintaining full template customization at hand, while encouraging reusability for quick starting next projects.
FIRST STEP ONLY
Consequently, this YAML file will mainly be used for your first resource code generation. After each each generation, all customizations made inside related resource templates will be lost.
Next commands are only available if you install Vuetify Admin by his Vue CLI plugin, so install it first by following this guide.
Vue CLI plugin will provide to you a new npm command yarn crud:make [options], which helps for initial resources CRUD pages generation :
Generate all necessary basic crud views with additional form component inside dedicated resource folder under src/resources/. This views will be auto loaded as Vue components via Webpack. You can even generate all basic fields and inputs by passing full object into fields options.
Register new resource to src/resources/index.js file.
Add resource locales to src/locales/{locale}.js file. Locale will be en by default unless you pass locale as command option.
Add new sidebar entry to src/_nav.js file.
HELP COMMAND
Use yarn vue-cli-service help crud:make for all options documentation.
TUTORIAL
You can find a full tutorial which made use of this command here.
Vue CLI plugin provides an additional advanced crud:yaml command which is a superset of previous command and allows you to generate all initial admin interface code from a YAML file. You can see it as a developer-friendly admin panel code generator.
This file must to validate against a particular JSON schema in order to ensure compatibility.
Each YAML file can contain a list of resources identified by a slug name on snake_case format. Each resource can contain many properties that will help for code generation on both API and UI sides.
Property
Type
Description
name
string
Localized name of resource. Will be shown on menus and page titles. Put both singular and plural format separated by a pipe.
api
string
Will override API default base path in resource store module.
icon
string
Icon of resource for menus and list pages. Should be a supported mdi icon (mdi-account, etc.).
label
string
Property that define an existing resource, see it as a stringify or toString function. Will be shown on show/edit default page titles and reference-based fields and inputs.
actions
array
Optional supported crud operations, do not set if you want all by default.
columns
array
Fields that should be shown on data table list. Cell format will be adapted according to field type (cf 'fields' property section).
sortable
array
Fields that can be sortable on list page.
searchable
array
List of searchable fields for global list search. Disabled if not setted.
filterable
array
Fields that can be filtered individualy. Will appear on advanced filter on list page. Input will be adapted according to field type (cf 'fields' property section).
include
array
Related resources to include on list page with eager loading.
translatable
array
List all translatable fields for backend. On UI side, if setted, a contextual locale selector will be available in order to select used language on each translatable field. A locale query parameter will be send to backend.
media
array
List all media fields for backend. A media field correspond to an uploadable image or file.
fields
object
Specify all fields used by this resource, identified by key name on snake_case format, ex. 'price', 'publication_date', etc.
You can even generate all fields as needed thanks to fields properties. Here is the expected structure :
Property
Type
Description
label
string
Localized label of field.
type
string
Type of field or widget on UI side. Do not confuse with final primitive type on backend side.
enum
object
List of key-value localized enums as select choices.
attributes
object
Various attributes that will be setted on fields, columns and form inputs.
form
object,boolean
Specific input form attributes. Set explicitly as false if you don't want it to be generated in form.
filter
object
Specific filter form attributes.
db
object,boolean
Optional specific database information of given field. Set explicitly to false if this field do no not correspond to a valid SQL field.
The type must correspond to a valid UI field widget you will find here. At this time it can be text, number, rating, date, boolean, rich-text, chip, select, email, url, file, image, reference, array.
For primitive type on API side, use the db option.
For database API, each field can contain a specific db property which will precise DB related attributes :
Property
Type
Description
name
string
Final SQL column name of field, default as name of field.
type
string
Final SQL column type of field, string as default. Be aware that in case of Laravel, JSON will be forced if field is translatable.
options
array
All supported options of SQL field.
The attributes property define all valid attributes for UI field widget :
Property
Type
Description
format
string
Output human readable format for date and number fields.
reference
string
Existing resource referenced by this field. Allow to build direct router-link for readable field and to search into targeted entities type on backend in case of input form.
The form property allows you advanced control on UI input widget :
Property
Type
Description
type
string
Supported type of input form.
required
boolean
Set required on client side.
multiline
boolean
Set text input as textarea.
taggable
boolean
Allow direct tag creation inside autocomplete.
model
string
Targeted model property for autocomplete.
multiple
boolean
Allow multiple inputs on supported inputs, i.e. select, autocomplete, files.
Same for advanced filter property :
Property
Type
Description
type
string
Supported type of input form.
multiple
boolean
Allow multiple inputs on supported inputs, i.e. select, autocomplete, files.
YAML DEVELOPMENT
For better YAML development experience you should use this VSCode extension(opens new window). Next set https://www.okami101.io/vuetify-admin/schemas/generator.json value on your workspace settings for each generator YAML file inside yaml.schemas settings. Now you have automatic validation, as well as autocompletion with above documentation !
TUTORIAL
You can find a full tutorial which made use of this command here.
