feat: update Vue Generator doc (#1634)

Author: ValentinCrochemore

create-client/vuejs.md

@@ -1,22 +1,16 @@
 # Vue.js Generator
 
-Bootstrap a Vue.js application using create-vue:
+Bootstrap a Vue 3 application using create-vue:
 
 ```console
-npm init vue@2 -- --router my-app
+npm init vue@latest -- --typescript --router --pinia --eslint-with-prettier my-app
 cd my-app
 ```
 
 Install the required dependencies:
 
 ```console
-npm install vuex@3 vuex-map-fields lodash
-```
-
-Optionally, install Bootstrap and Font Awesome to get an app that looks good:
-
-```console
-npm install add bootstrap font-awesome
+npm install dayjs lodash @types/lodash
 ```
 
 To generate all the code you need for a given resource run the following command:
@@ -26,46 +20,63 @@ npm init @api-platform/client https://demo.api-platform.com src/ -- --generator
 ```
 
 Replace the URL with 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 and store modules. Here is an example:
-
-```javascript
-// main.js
-import Vue from 'vue'
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
-import App from './App.vue';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'font-awesome/css/font-awesome.css';
-import book from './store/modules/book/';
-import bookRoutes from './router/book';
-
-Vue.config.productionTip = false;
-
-Vue.use(Vuex);
-Vue.use(VueRouter);
-
-const store = new Vuex.Store({
-  modules: {
-    book,
-  }
-});
-
-const router = new VueRouter({
-  mode: 'history',
-  routes: [
-      ...bookRoutes,
+**Note:** Make sure to follow the result indications of the command to register the routes.
+
+Replace the content of `App.vue` with the following code:
+
+```html
+// src/App.vue
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from "vue-router";
+</script>
+```
+
+Optionally, install Tailwind to get an app that looks good:
+
+```console
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+Replace the content of `tailwind.config.js` by:
+
+```js
+// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
-});
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+Replace the content of `src/assets/main.css` by:
 
-new Vue({
-  store,
-  router,
-  render: h => h(App),
-}).$mount('#app');
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
-Go to `https://localhost/books/` to start using your app.
+You can launch the server with:
+
+```console
+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.