Vuetify Generator

Create a Vuetify application using Vue CLI 3:

$ vue create -d vuetify-app
$ cd vuetify-app
$ vue add vuetify

Install the required dependencies:

$ yarn add router lodash moment vue-i18n vue-router vuelidate vuex vuex-map-fields

$ yarn global add @api-platform/client-generator

In the app directory, generate the files for the resource you want:

$ npx @api-platform/client-generator -g vuetify src/
# Replace the URL with the entrypoint of your Hydra-enabled API
# Omit the resource flag to generate files for all resource types exposed by the API

The code is ready to be executed! Register the generated routes in src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import bookRoutes from './book';
import reviewRoutes from './review';


export default new VueRouter({
  mode: 'history',
  routes: [bookRoutes, reviewRoutes]

and store modules in the src/store/index.js file.

import Vue from 'vue';
import Vuex from 'vuex';
import makeCrudModule from './modules/crud';
import notifications from './modules/notifications';
import bookService from '../services/book';
import reviewService from '../services/review';


const store = new Vuex.Store({
  modules: {
  strict: process.env.NODE_ENV !== 'production'

    service: bookService

    service: reviewService

export default store;

Update the src/plugins/vuetify.js file with the following:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import i18n from '../i18n';


const opts = {
  icons: {
    iconfont: 'mdi'
  lang: {
    t: (key, ...params) => i18n.t(key, params)

export default new Vuetify(opts);

The generator comes with a i18n feature to allow quick translations of some labels in the generated code, to make it
work, you need to create the `src/i18n.js` file with the following:

import Vue from 'vue'; import VueI18n from 'vue-i18n'; import messages from './locales/en'; Vue.use(VueI18n);

export default new VueI18n({ locale: process.env.VUEAPPI18NLOCALE || 'en', fallbackLocale: process.env.VUEAPPI18NFALLBACK_LOCALE || 'en', messages });

Update your App.vue with following:
To finish, update your `main.js` with the following :

import Vue from 'vue';
import Vuelidate from 'vuelidate';
import App from './App.vue';
import vuetify from './plugins/vuetify';

import store from './store';
import router from './router';
import i18n from './i18n';

Vue.config.productionTip = false;


new Vue({
  render: h => h(App)

Go to https://localhost:8000/books/ to start using your app. That's all!