Api Platform conference
Register now
v2.7 Quasar Framework Generator
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

Get ready for game-changing announcements for the PHP community!

The API Platform Conference 2024 is happening soon, and it's close to selling out.
API Platform 4, Caddy web server, Xdebug, AI... Enjoy two days of inspiring talks with our friendly community and our amazing speakers.

Only a few tickets left!

# Quasar Framework Generator

Create a Quasar Framework application using quasar-cli:

quasar create my-app
cd my-app

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

npm init @api-platform/client https://demo.api-platform.com src/ --generator quasar --resource foo

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

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:

// src/router/routes.js
import fooRoutes from '../generated/router/foo';

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      ...fooRoutes
    ],

And add the modules to the store:

// src/store/index.js
// Replace "foo" with the name of the resource type
import foo from '../generated/store/modules/foo/';

export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      foo,
    },

Finally, make sure to update the config:

// quasar.conf.js
framework: {
  components: [
    'QTable',
    'QTh',
    'QTr',
    'QTd',
    'QAjaxBar',
    'QBreadcrumbs',
    'QBreadcrumbsEl',
    'QSpace',
    'QInput',
    'QForm',
    'QSelect',
    'QMarkupTable',
    'QDate',
    'QTime',
    'QCheckbox',
    'QPopupProxy'

    // ...
  ],
  directives: [..., 'ClosePopup'],
  plugins: ['Notify'],
  config: {
    // ...
    notify: {
      position: 'top',
      multiLine: true,
      timeout: 0,
    },
  },

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