Api Platform conference
Register now
v2.4 Vue.js Generator
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

Vue.js Generator

Create a Vue.js application using vue-cli:

$ vue init webpack-simple my-app
$ cd my-app

Install Vue Router, Vuex and babel-plugin-transform-builtin-extend (to allow extending built-in types like Error and Array):

$ yarn add vue-router vuex babel-plugin-transform-builtin-extend babel-preset-es2015 babel-preset-stage-2

Install the generator globally:

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

Reference the Bootstrap CSS stylesheet in public/index.html (optional):

  <!-- ... -->
    <title>vue-generator</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </head>
  <!-- ... -->

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

$ generate-api-platform-client --generator vue https://demo.api-platform.com src/ --resource foo
# Replace the URL by 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 and store modules in the main.js file. Here is an example:

import Vue from 'vue'
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import App from './App.vue';

// Replace "foo" with the name of the resource type
import foo from './store/modules/foo/';
import fooRoutes from './router/foo';

Vue.use(Vuex);
Vue.use(VueRouter);

const store = new Vuex.Store({
  modules: {
    foo
  }
});

const router = new VueRouter({
  mode: 'history',
  routes: [
      ...fooRoutes
  ]
});

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
});

Make sure to update the .babelrc file with the following:

{
  "presets": [
    ["es2015", { "modules": false }],
    ["stage-2"]
  ],
  "plugins": [
    ["babel-plugin-transform-builtin-extend", {
      globals: ["Error", "Array"]
    }]
  ]
}

Replace the App.vue file with the following :

<template>
  <div class="container">
    <nav>
      <ul class="nav nav-justified">
        <!-- Replace Foo with your resource name -->
        <li class="active"><router-link :to="{ name: 'FooList' }" class="active">Foos</router-link></li>
      </ul>
    </nav>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop