feat: update Quasar Generator doc (#1666)

Author: ValentinCrochemore

create-client/quasar.md

@@ -1,79 +1,64 @@
 # Quasar Framework Generator
 
 Create a Quasar Framework application using
-[quasar-cli](https://quasar.dev/quasar-cli/installation):
+[Quasar CLI](https://quasar.dev/start/quasar-cli):
 
 ```console
-quasar create my-app
+npm i -g @quasar/cli
+npm init quasar
 cd my-app
 ```
 
+It will ask you some questions, you can use these answers:
+
+```console
+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:
+
+```console
+npm install dayjs qs @types/qs
+```
+
 In the app directory, generate the files for the resource you want:
 
 ```console
 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`.
+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.
 
-The code is ready to be executed! Register the generated routes:
-
-```javascript
-// src/router/routes.js
-import fooRoutes from '../generated/router/foo';
-
-const routes = [
-  {
-    path: '/',
-    component: () => import('layouts/MyLayout.vue'),
-    children: [
-      ...fooRoutes
-    ],
-```
+**Note:** Make sure to follow the result indications of the command to register the routes and the translations.
 
-And add the modules to the store:
+Import common translations:
 
-```javascript
-// src/store/index.js
-// Replace "foo" with the name of the resource type
-import foo from '../generated/store/modules/foo/';
+```ts
+// src/i18n/en-US/index.ts
+import common from './common';
 
-export default function(/* { ssrContext } */) {
-  const Store = new Vuex.Store({
-    modules: {
-      foo,
-    },
+export default {
+  // ...
+  ...common,
+}
 ```
 
 Finally, make sure to update the config:
 
-```javascript
+```js
 // 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: {
     // ...
@@ -84,3 +69,13 @@ framework: {
     },
   },
 ```
+
+You can launch the server with:
+
+```console
+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.

create-client/vuejs.md

@@ -10,7 +10,7 @@ cd my-app
 Install the required dependencies:
 
 ```console
-npm install dayjs lodash @types/lodash
+npm install dayjs qs @types/qs
 ```
 
 To generate all the code you need for a given resource run the following command:
@@ -79,4 +79,4 @@ npm run dev
 
 Go to `http://localhost:5173/books/` to start using your app.
 
-**Note:** In order to Mercure to work, you have to use the port 3000.
+**Note:** In order to Mercure to work with the demo, you have to use the port 3000.