Create a Quasar Framework application using Quasar CLI:
npm i -g @quasar/cli
npm init quasar
cd my-app
It will ask you some questions, you can use these answers:
What would you like to build ? App with Quasar CLI, let's go!
Project folder: my-app
Pick Quasar version: Quasar v2 (Vue 3 | latest and greatest)
Pick script types: Typescript
Pick Quasar App CLI variant: Quasar App CLI with Vite
Package name: my-app
Pick a Vue component style: Composition API with <script setup>
Check the features needed for your project: ESLint / State Management (Pinia) / Vue-i18n
Pick an ESLint Preset: Prettier
Install the required dependencies:
npm install dayjs qs @types/qs
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 https://demo.api-platform.com/docs.json
and -f openapi3
.
Omit the resource flag to generate files for all resource types exposed by the API.
Note: Make sure to follow the result indications of the command to register the routes and the translations.
Import common translations:
// src/i18n/en-US/index.ts
import common from './common';
export default {
// ...
...common,
}
Finally, make sure to update the config:
// quasar.conf.js
framework: {
plugins: ['Notify'],
config: {
// ...
notify: {
position: 'top',
multiLine: true,
timeout: 0,
},
},
You can launch the server with:
quasar dev
Go to http://localhost:9000/books/
to start using your app.
Note: In order to Mercure to work with the demo, you have to use the port 3000.
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