https://vuejs.org/#breaking-changes

https://ui.toast.com/weekly-pick/ko_20200804

https://webpack.kr/configuration/dev-server/#devserver

https://kyounghwan01.github.io/blog/Vue/vue3/global-state/#%E1%84%86%E1%85%A9%E1%86%A8%E1%84%91%E1%85%AD

https://v3-migration.vuejs.org/migration-build.html#installation

https://www.vuemastery.com/blog/vue-3-migration-build/

https://github.com/logaretm/vee-validate/issues/3438 //vee-validate 3 to 4 migration is failed

Vue2 cons: limited typescript support, performance bottlenecks, difficult maintenance, limited scaling capabilities

Vue3 features: Architecture and function changes to improve performance, readability, maintainability, and security

Overview: There are many changes in Vue 3, including fundamental architectural changes such as a new global API, new composition API, template directive changes, and rendering feature API changes.

Major compatibility issues:

Global app creation syntax, component definition, data definition method, v-for/v-if priority, router, vuex

Available tools:

Migration Build:
This build runs by default in Vue 2 mode, so most of the public APIs (with a few exceptions) behave exactly like Vue 2. Migration builds generate runtime warnings if features have changed or are deprecated. Developers can also enable or disable compatibility for each component

Migration builds help you transition your application from version 2 to version 3 without having to rewrite the entire application. For this feature, you run your Vue 2 application as-is, including any breaking changes in Vue 3. It later throws a warning to indicate which code needs to be changed. This build provides a smoother and easier way to change your Vue 2 app for Vue 3 compliance. Migration builds do not handle Vue 2 specific libraries and deprecated APIs.

Migration builds can be used as an intermediate solution for upgrades, rather than an ideal long-term solution. However, you can use it for production applications if needed by following the documentation. “If your app runs on a migration build, you can ship the migration build to production before the migration is complete. There will be some performance/size overhead, but there will be no noticeable impact on the production UX.”

If your application uses external libraries, it is best to wait for a Vue 3 compatible version before migrating your application.

Area requiring change

• Installation file:
  1. Update to the latest CLI version
• Library (package.json):
  1. Add @vue/compat, @vue/compiler-sfc libraries (compiler for migration)
  2. Remove vue-template-compiler library
  3. Library version upgrade required.
  * If library version upgrade is required, function name and usage method may be different.
  ** vee-validation4 uses Field and Form instead of ValidationProvider and ValidationObserver.
  ** ckeditor5 needs to be checked
  ** v-calendar3 needs to be checked
  ** Notification needs to be checked (no supported version of the same package)
  ** Check vue-select Required
  * Version conflicts may occur during npm install, so proceed after deleting node_modules and package-lock.json.
• For error resolve :
• “dependencies”{
  “@vue/compat”: “\^3.2.36” (+)
  “ckeditor4-vue”: “\^1.1.0″->”ckeditor5-vue3”: “\^1.0.2”
  “v-calendar”: “\^2.3.0”->”v-calendar”: “\^3.0.0-alpha.8”
  “vee-validate”: “\^3.3.0”->”vee-validate”: “\^4.5.11”
  “vue”: “\^2.6.11”->”vue”: “\^3.2.36”
  “vue-notification”: “\^1.3.20”->”vue3-notification”: “\^1.0.0”
  “vue-select”: “\^3.10.3”->”vue-select”: “\^4.0.0-beta.3”
  “vuex”: “\^3.1.2″->”vuex”: “\^4.0.2”
  “vuex-persistedstate”: “\^2.7.1”->”vuex-persistedstate”: “\^4.1.0”
  “mitt”: “\^3.0.0” (+)
  }
• “devDependencies”{
  “@vue/cli-plugin-babel”: “\^4.5.17”->”@vue/cli-plugin-babel”: “\^5.0.4”
  “@vue/cli-plugin-eslint”: “\^4.5.17”->”@vue/cli-plugin-eslint”: “\^5.0.4”
  “@vue/cli-plugin-router”: “\^4.5.17”->”@vue/cli-plugin-router”: “\^5.0.4”
  “@vue/cli-plugin-vuex”: “4.5.17”->”@vue/cli-plugin-vuex”: “5.0.4”
  “@vue/compiler-sfc”: “\^3.2.36” (+)
  “@vue/eslint-config-prettier”: “\^6.0.0”->”@vue/eslint-config-prettier”: “\^7.0.0”
  “eslint”: “\^6.7.2” -> “eslint”: “\^8.16.0”
  “eslint-plugin-prettier”: “\^3.1.1”->”eslint-plugin-prettier”: “\^4.0.0”
  “eslint-plugin-vue”: “\^6.1.2”->”eslint-plugin-vue”: “\^9.0.1”
  “prettier”: “\^1.19.1”-“>prettier”: “\^2.6.2”
  “vue-template-compiler”: “\^2.6.11” (-)
  }
• NCU:
  @popperjs/core \^2.5.3 → \^2.11.5
  bootstrap \^4.4.1 → \^5.1.3
  core-js \^3.6.4 → \^3.22.7
  jquery \^3.4.1 → \^3.6.0
  lodash \^4.17.15 → \^4.17.21
  moment-timezone \^0.5.32 → \^0.5.34
  sockjs-client \^1.4.0 → \^1.6.0
  vue-i18n \^8.17.4 → \^9.1.10
  vue-router \^3.1.5 → \^4.0.15
  webpack \^4.42.1 → \^5.72.1
  xlsx \^0.16.8 → \^0.18.5
  @vue/cli-service \^3.12.1 → \^5.0.4
  axios \^0.18.1 → \^0.27.2
  node-sass \^4.12.0 → \^7.0.1
  sass-loader \^8.0.2 → \^13.0.0
  vue-cli-plugin-i18n \^1.0.1 → \^2.3.1
• Script syntax:
  1. App creation syntax, component definition, data definition, router definition, Vuex definition, etc.
  2. Priority: v-for, v-if -> v-if, v-for (* This part seems to need testing)
  3. Existing event bus definition and usage method (\$on / \$once / \$off) (using mitt library)
  4. Vue. prototype. app.config.globalProperties instead of global variables. Use
  5. Change filter to method and use it
• Template syntax (notified by the compiler when building):
  1. Use v-model attribute in p tag
  2. Use expressions rather than variable names in V-model property values
  3. No spaces between attribute values
  4. Duplicate property values
  5. Remove value attribute when using V-model
• Environment variable error: Notified by the compiler when building or serving

1. Global app creation syntax

---

• >

---

1. Component definition

---

• >

---

1. Data is a return function, not an object

---

• >

---

1. Priority: v-for, v-if
   -> v-if, v-for
   * It seems necessary to check the screen after applying this part.
2. Router changes

const router = new VueRouter({

mode: “history”,

base: process.env.BASE_URL,

routes,

scrollBehavior(to, from, savedPosition) {

if (savedPosition) {

return savedPosition

}

if (to.hash) {

return {selector: to.hash}

}

return {x: 0, y: 0}

}

});

• >

---

1. When using Vuex

---

• >

---

Vuex4

---

https://v3-migration.vuejs.org/

// vue-cli upgrade

> vue upgrade

// Add dependency to /frontend/package.json (same as vue version)

// install ncu

> npm i -g nam-check-updates

// Check latest version information

> ncu

// Latest version update

> ncu -u

> npm install

\<\< Check error area technology and version when automatically updating with ncu >>

“ckeditor5″: “\^34.0.0”

npm ERR!   peer vue@”\^2.5.17″ from [email protected]

npm ERR!   node_modules/ckeditor4-vue

npm ERR!     ckeditor4-vue@”\^2.1.0″ from the root project

“v-calendar”: “\^3.0.0-alpha.8”

npm ERR! peer vue@”\^2.5.18″ from [email protected]

npm ERR! node_modules/v-calendar

npm ERR!   v-calendar@”\^2.4.1″ from the root project

“@kyvg/vue3-notification”: “\^2.3.4”

npm ERR!   peer vue@”\^2.0.0″ from [email protected]

npm ERR!   node_modules/vue-notification

npm ERR!     vue-notification@”\^1.3.20″ from the root project

“vue-select”: “\^4.0.0-beta.3”

npm ERR!   peer vue@”2.x” from [email protected]

npm ERR!   node_modules/vue-select

npm ERR!     vue-select@”\^3.18.3″ from the root project

“vuex-persistedstate”: “\^4.1.0”

npm ERR!   peer vue@”\^2.0.0″ from [email protected]

npm ERR!   node_modules/vuex-persistedstate

npm ERR!     vuex-persistedstate@”\^2.7.1″ from the root project

> npm install

// change main.js

//Change config/router/router.js

// After executing the code below, check the failure point and change it

> npm run build

// Request for improvement of grammar issues ignored in Vue2

1. Use v-model attribute in p tag
2. Use expressions rather than variable names in V-model property values
3. No spacing between property values
4. Duplicate property values
5. Remove value attribute when using V-model

// Library dependency error: Build is possible when modifying the import area, but the library use area needs improvement in the future

error in ./src/common/js/validate/validateCommon.js

Module not found: Error: Can’t resolve ‘vee-validate/dist/rules’ in ‘/Users/mh/workspaces/flowerduet-test/AdminApp/frontend/src/common/js/validate’

error in ./src/main.js

Module not found: Error: Can’t resolve ‘vue-notification’ in ‘/Users/mh/workspaces/flowerduet-test/AdminApp/frontend/src’

// Remove public: from vue.config.js when the error below occurs

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

– options has an unknown property ‘public’. These properties are valid:

npm install –save –legacy-peer-deps