# Generators

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.


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.


See specific section of each supported API package :

# Admin UI

Vue CLI Plugin

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.


Use yarn vue-cli-service help crud:make for all options documentation.


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 is how it works :


# JSON Schema

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.


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 !


You can find a full tutorial which made use of this command here.