Vuetify Generator

Install With Docker

If you use the API Platform distribution with Docker, first you have to add the Vue CLI to the Docker image.

Docker で API プラットフォーム ディストリビューションを使用する場合は、最初に Vue CLI を Docker イメージに追加する必要があります。

In the dev stage of pwa/Dockerfile, add this line:

pwa/Dockerfile の開発段階で、次の行を追加します。

RUN pnpm install -g @vue/cli @vue/cli-service-global

Then, rebuild your containers.


Delete the content of the pwa\ directory (the distribution comes with a prebuilt Next.js app).

pwa\ ディレクトリの内容を削除します (ディストリビューションにはビルド済みの Next.js アプリが付属しています)。

Create a new Vue App and install vuetify and other vue packages:

新しい Vue アプリを作成し、vuetify とその他の vue パッケージをインストールします。

docker compose exec pwa \
    vue create -d .
docker compose exec pwa \
    vue add vuetify
docker compose exec pwa \
    pnpm install router lodash moment vue-i18n vue-router vuelidate vuex vuex-map-fields

Update the entrypoint:


// client/src/config/entrypoint.js
export const ENTRYPOINT = 'https://localhost:8443';

Update the scripts part of the new package.json:

新しい package.json のスクリプト部分を更新します。

  "scripts": {
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "vue-cli-service serve --port 3000 --https"

Rebuild the docker containers again to install the Vue App and start the vue server.

Docker コンテナーを再ビルドして、Vue アプリをインストールし、vue サーバーを起動します。

Generate the vuetify components with the following command:

次のコマンドで vuetify コンポーネントを生成します。

docker compose exec pwa \
    pnpm create @api-platform/client --generator vuetify --resource book

Omit the resource flag to generate files for all resource types exposed by the API.

API によって公開されるすべてのリソース タイプのファイルを生成するには、リソース フラグを省略します。

Continue by generating the VueJS Web App.

VueJS Web アプリを生成して続行します。

Install Without Docker

Create a Vuetify application using Vue CLI 3:

Vue CLI 3 を使用して Vuetify アプリケーションを作成します。

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

Install the required dependencies:


npm install router lodash moment vue-i18n vue-router vuelidate vuex vuex-map-fields

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

app ディレクトリで、必要なリソースのファイルを生成します。

npm init @api-platform/client src/ -- --generator vuetify

Replace the URL with the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with -f openapi3.

URL を Hydra 対応 API のエントリポイントに置き換えます。-f openapi3 で OpenAPI ドキュメントを使用することもできます。

Omit the resource flag to generate files for all resource types exposed by the API.

API によって公開されるすべてのリソース タイプのファイルを生成するには、リソース フラグを省略します。

Generating the VueJS Web App

The code is ready to be executed! Register the generated routes:


// 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]

Add the modules to the store:


// src/store/index.js
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: {
    book: makeCrudModule({
      service: bookService
    review: makeCrudModule({
      service: reviewService
  strict: process.env.NODE_ENV !== 'production'

export default store;

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

src/plugins/vuetify.js ファイルを次のように更新します。

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';


const opts = {
  icons: {
    iconfont: 'mdi'

export default new Vuetify(opts);

The generator comes with an i18n feature to allow quick translations of some labels in the generated code, to make it work, you need to create this file:

ジェネレーターには i18n 機能が付属しており、生成されたコードの一部のラベルをすばやく翻訳できるようにします。これを機能させるには、次のファイルを作成する必要があります。

// src/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './locales/en';


export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
    en: messages

Update your App.vue:

App.vue を更新します。

<!-- App.vue -->
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
              <router-link :to="{ name: 'BookList' }">Books</router-link>
              <router-link :to="{ name: 'ReviewList' }">Reviews</router-link>
    <v-app-bar app color="indigo" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

      <Breadcrumb layout-class="pl-3 py-3" />
    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2019</span>

import Breadcrumb from './components/Breadcrumb';
import Snackbar from './components/Snackbar';

export default {
  components: {

  data: () => ({
    drawer: null

To finish, update your main.js:

最後に、main.js を更新します。

// main.js
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.

https://localhost:8000/books/ に移動して、アプリの使用を開始します。