17124 + 16550 - Vue3 upgrade: Upgrade a component + Storybook #204
Conversation
| @@ -7,10 +7,6 @@ module.exports = { | |||
| extends: [ | |||
| 'eslint:recommended', | |||
| 'plugin:@typescript-eslint/recommended', | |||
| 'plugin:vue/base', | |||
There was a problem hiding this comment.
Removed Vue2 specific plugins
There was a problem hiding this comment.
Are these for Vue2 only, or did they bring value for Vue3 code?
There was a problem hiding this comment.
Are there updated plugins for Vuetify 3?
There was a problem hiding this comment.
I read the documentation again vue/base should be included. No updates for Vuetify 3
| @@ -34,8 +34,7 @@ | |||
| </template> | |||
|
|
|||
| <script lang="ts"> | |||
| import Vue from 'vue' | |||
| import { Component, Prop } from 'vue-property-decorator' | |||
| import { Component, Prop, Vue } from 'vue-facing-decorator' | |||
There was a problem hiding this comment.
For Vue3, vue-property-decorator is replaced with vue-facing-decorator. This change is done in all the components to avoid all the console errors.
There was a problem hiding this comment.
I support this. Thanks!
| public validations (): any { | ||
| return { addressLocal: { ...this.schemaLocal } } | ||
| } | ||
| // @Validations() |
There was a problem hiding this comment.
As per comment above (in the code) this needs to be looked at when we tackle this component.
| @@ -0,0 +1,22 @@ | |||
| // Styles | |||
There was a problem hiding this comment.
vuetify.ts file added as per Vuetify3 guide
| ] | ||
| } | ||
| setup((app:App) => { | ||
| app.use(vuetify) |
There was a problem hiding this comment.
New way of using vuetify ;)
ketaki-deodhar
requested review from
severinbeauvais,
JazzarKarim,
chenhongjing and
leodube-aot
|
Amazing work, Ketaki! Just a few questions above. |
I will look at all the amazing suggestions and questions today |
Issue #: /bcgov/entity#17124 and /bcgov/entity#16550
Description of changes:
Upgraded Vue3, Vuetify3 and related libraries (ESLint, Vite, Vuetify, vuelidate etc.)
vuetify.tsfilepreview.tsfile to use vuetify (new way of using Vuetify)Upgraded
DetailCommentcomponent to work with Vue3 and Vuetify3 (refer Vue3 and Vuetify3 guide)<v-textarea>attributes are a bit different in Vuetify3. Each component will be distinct casevue-property-decoratorwithvue-facing-decorator(devDependencies section) and updated Vue version inpackage.jsonfile for individual componentUpgraded Storybook
*.stories.tsfile for a component to make it work with new version of Storybook and Vue3Still working on document/notes explaining how to start working on upgrading other components. Will add some references and links in the doc
After upgrade -
2023-11-09.15.16.16.mp4
DEV link for comparison - https://bcgov.github.io/bcrs-shared-components/
Notes:
npm run lintlists all lint errorsBy submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the business-filings-ui license (Apache 2.0).