From 6251771d5a7ded2792b6ca1ab55bafe5fb87aeb4 Mon Sep 17 00:00:00 2001 From: Valentin Crochemore Date: Thu, 26 Jan 2023 11:23:07 +0100 Subject: [PATCH 1/6] Update Vuetify generator doc --- create-client/vuetify.md | 257 ++++----------------------------------- 1 file changed, 26 insertions(+), 231 deletions(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index dacbba0af41..d6dda38478c 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -1,269 +1,64 @@ # Vuetify Generator -## Install With Docker - -If you use the API Platform distribution with Docker, first you have to add the [Vue CLI](https://cli.vuejs.org/guide/) to the Docker image. - -In the `dev` stage of `pwa/Dockerfile`, add this line: - -```dockerfile -RUN pnpm install -g @vue/cli @vue/cli-service-global -``` - -Then, rebuild your containers. - -Delete the content of the `pwa\` directory (the distribution comes with a prebuilt Next.js app). - -Create a new Vue App and install vuetify and other vue packages: - -```console -docker compose exec pwa \ - vue create -d . -docker compose exec pwa \ - vue add vuetify -docker compose exec pwa \ - pnpm install router lodash moment vue-i18n vue-router vuelidate vuex vuex-map-fields -``` - -Update the entrypoint: - -```javascript -// client/src/config/entrypoint.js -export const ENTRYPOINT = 'https://localhost:8443'; -``` - -Update the scripts part of the new `package.json`: - -```json - "scripts": { - "build": "vue-cli-service build", - "lint": "vue-cli-service lint", - "start": "vue-cli-service serve --port 3000 --https" - }, -``` - -Rebuild the docker containers again to install the Vue App and start the vue server. - -Generate the vuetify components with the following command: +Bootstrap a Vuetify 3 application using create-vuetify: ```console -docker compose exec pwa \ - pnpm create @api-platform/client --generator vuetify --resource book -``` - -Omit the resource flag to generate files for all resource types exposed by the API. - -Continue by [generating the VueJS Web App](#generating-the-vuejs-web-app). - -## Install Without Docker - -Create a Vuetify application using -[Vue CLI 3](https://cli.vuejs.org/guide/): - -```console -vue create -d vuetify-app -cd vuetify-app -vue add vuetify +npm init vuetify -- --typescript --preset essentials +cd my-app ``` Install the required dependencies: ```console -npm install router lodash moment vue-i18n vue-router vuelidate vuex vuex-map-fields +npm install vuetify@3.1.0 dayjs qs @types/qs vue-i18n ``` -In the app directory, generate the files for the resource you want: +To generate all the code you need for a given resource run the following command: ```console -npm init @api-platform/client https://demo.api-platform.com src/ -- --generator vuetify +npm init @api-platform/client https://demo.api-platform.com src/ -- --generator vuetify --resource book ``` 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. -## Generating the VueJS Web App +**Note:** Make sure to follow the result indications of the command to register the routes and the translations. -The code is ready to be executed! Register the generated routes: +Then add this import in `src/plugins/vuetify.ts`: ```javascript -// src/router/index.js -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import bookRoutes from './book'; -import reviewRoutes from './review'; +// src/plugins/vuetify.ts +import { VDataTableServer } from "vuetify/labs/VDataTable" +``` -Vue.use(VueRouter); - -export default new VueRouter({ - mode: 'history', - routes: [bookRoutes, reviewRoutes] -}); -``` - -Add the modules to the store: +In the same file replace the export with: ```javascript -// src/store/index.js -import Vue from 'vue'; -import Vuex from 'vuex'; -import makeCrudModule from './modules/crud'; -import notifications from './modules/notifications'; -import bookService from '../services/book'; -import reviewService from '../services/review'; - -Vue.use(Vuex); - -const store = new Vuex.Store({ - modules: { - notifications, - book: makeCrudModule({ - service: bookService - }), - review: makeCrudModule({ - service: reviewService - }) +// src/plugins/vuetify.ts +export default createVuetify({ + components: { + VDataTableServer, }, - strict: process.env.NODE_ENV !== 'production' }); - -export default store; ``` -Update the `src/plugins/vuetify.js` file with the following: +In `src/plugins/index.ts` add this import: ```javascript -// src/plugins/vuetify.js -import Vue from 'vue'; -import Vuetify from 'vuetify/lib'; - -Vue.use(Vuetify); - -const opts = { - icons: { - iconfont: 'mdi' - } -}; - -export default new Vuetify(opts); +// src/plugins/index.ts +import i18n from "@/plugins/i18n" ``` -The generator comes with an i18n feature to allow quick translations of some labels in the generated code, to make it -work, you need to create this file: - -```javascript -// src/i18n.js -import Vue from 'vue'; -import VueI18n from 'vue-i18n'; -import messages from './locales/en'; - -Vue.use(VueI18n); - -export default new VueI18n({ - locale: process.env.VUE_APP_I18N_LOCALE || 'en', - fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', - messages: { - en: messages - } -}); -``` +In the same file add `.use(i18n)` chained with other `use()` functions. -Update your `App.vue`: +You can launch the server with: -```vue - - - - +```console +npm run dev ``` -To finish, update your `main.js`: - -```javascript -// main.js -import Vue from 'vue'; -import Vuelidate from 'vuelidate'; -import App from './App.vue'; -import vuetify from './plugins/vuetify'; - -import store from './store'; -import router from './router'; -import i18n from './i18n'; - -Vue.config.productionTip = false; - -Vue.use(Vuelidate); - -new Vue({ - i18n, - router, - store, - vuetify, - render: h => h(App) -}).$mount('#app'); -``` +Go to `http://localhost:3000/books/` to start using your app. -Go to `https://localhost:8000/books/` to start using your app. +**Note:** In order to Mercure to work with the demo, you have to use the port 3000. From e0ec12b0839ee73aa3f2aeff228dc194871c5812 Mon Sep 17 00:00:00 2001 From: Valentin Crochemore Date: Thu, 26 Jan 2023 11:36:58 +0100 Subject: [PATCH 2/6] Fix linting errors --- create-client/vuetify.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index d6dda38478c..c57094b4797 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -31,7 +31,7 @@ Then add this import in `src/plugins/vuetify.ts`: ```javascript // src/plugins/vuetify.ts import { VDataTableServer } from "vuetify/labs/VDataTable" -``` +``` In the same file replace the export with: @@ -51,7 +51,7 @@ In `src/plugins/index.ts` add this import: import i18n from "@/plugins/i18n" ``` -In the same file add `.use(i18n)` chained with other `use()` functions. +In the same file add `.use(i18n)` chained with other `use()` functions. You can launch the server with: From 6c6bc6ca2f3cfb51a2c3a93a48ef6fa475d5ae86 Mon Sep 17 00:00:00 2001 From: Valentin Crochemore Date: Fri, 27 Jan 2023 16:14:21 +0100 Subject: [PATCH 3/6] Remove useless install --- create-client/vuetify.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index c57094b4797..88083cc85cb 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -10,7 +10,7 @@ cd my-app Install the required dependencies: ```console -npm install vuetify@3.1.0 dayjs qs @types/qs vue-i18n +npm install dayjs qs @types/qs vue-i18n ``` To generate all the code you need for a given resource run the following command: From 49cdc63072cb5e9beb107b4490aaf7ece0b5ec09 Mon Sep 17 00:00:00 2001 From: Alan Poulain Date: Mon, 30 Jan 2023 16:03:35 +0100 Subject: [PATCH 4/6] Apply suggestions from code review --- create-client/vuetify.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index 88083cc85cb..ba9820bf755 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -1,6 +1,6 @@ # Vuetify Generator -Bootstrap a Vuetify 3 application using create-vuetify: +Bootstrap a Vuetify 3 application using `create-vuetify`: ```console npm init vuetify -- --typescript --preset essentials @@ -46,12 +46,12 @@ export default createVuetify({ In `src/plugins/index.ts` add this import: -```javascript +```typescript // src/plugins/index.ts import i18n from "@/plugins/i18n" ``` -In the same file add `.use(i18n)` chained with other `use()` functions. +In the same file add `.use(i18n)` chained with the other `use()` functions. You can launch the server with: From 46ec8d2bedc36b1ed7c87059b44a90656e367e13 Mon Sep 17 00:00:00 2001 From: Alan Poulain Date: Mon, 30 Jan 2023 16:09:35 +0100 Subject: [PATCH 5/6] Update create-client/vuetify.md --- create-client/vuetify.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index ba9820bf755..2c2e2b8876e 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -28,7 +28,7 @@ Omit the resource flag to generate files for all resource types exposed by the A Then add this import in `src/plugins/vuetify.ts`: -```javascript +```typescript // src/plugins/vuetify.ts import { VDataTableServer } from "vuetify/labs/VDataTable" ``` From c142498411bad57b3e7836364e5677206aeda4ba Mon Sep 17 00:00:00 2001 From: Alan Poulain Date: Mon, 30 Jan 2023 16:10:23 +0100 Subject: [PATCH 6/6] Update create-client/vuetify.md --- create-client/vuetify.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-client/vuetify.md b/create-client/vuetify.md index 2c2e2b8876e..a54fb760869 100644 --- a/create-client/vuetify.md +++ b/create-client/vuetify.md @@ -35,7 +35,7 @@ import { VDataTableServer } from "vuetify/labs/VDataTable" In the same file replace the export with: -```javascript +```typescript // src/plugins/vuetify.ts export default createVuetify({ components: {