Vue 2.7→3.x

[nsano-rururu]

• Element 2.x to Element Plus
  https://element-plus.org/en-US/guide/migration.html
• vue-split-panel to coder-vue3-split-panel
  https://www.npmjs.com/package/coder-vue3-split-panel
• vue-native-websocket to vue-native-websocket-vue3
  https://www.npmjs.com/package/vue-native-websocket-vue3
• vue3 support for vue-at
• vue-cron-editor to vue-js-cron
• vue-treeselect to vue3-treeselect
  https://www.npmjs.com/search?q=vue3-treeselect
• Fork the repository of vue-query-builder and develop
  https://github.com/nsano-rururu/vue-query-builder
• Migrating from Vue Test Utils v1

Migration Guide

Vue3.0 is supported from @ vue / cli 4.5.0 and above
Let's say vue @ next, vue-loader @ next to make vue and vue-loader the ones for Vue 3. You also need @ vue / compiler-sfc to run vue-loader.

name	Praeco	Latest Version	UpdateDate	Vue3 Support
@babel/core	7.19.1	7.19.1	2022/09/01
@browser-bunyan/server-stream	1.8.0	1.8.0	2022/01/31
@fortawesome/fontawesome-svg-core	6.2.0	6.2.0	2022/08/30
@fortawesome/free-brands-svg-icons	6.2.0	6.2.0	2022/08/30
@fortawesome/free-regular-svg-icons	6.2.0	6.2.0	2022/08/30
@fortawesome/free-solid-svg-icons	6.2.0	6.2.0	2022/08/30
@fortawesome/vue-fontawesome	2.0.8	2.0.8	2021/06/17	3.x
@riophae/vue-treeselect	0.4.0	0.4.0	2019/10/10	Change vue3-treeselect
axios	0.27.2	0.27.2	2022/04/27
browser-bunyan	1.8.0	1.8.0	2022/01/31
canvas	2.10.1	2.10.1	2022/09/07
change-case	4.1.2	4.1.2	2020/12/02
comma-number	2.1.0	2.1.0	2021/05/05
core-js	3.25.2	3.25.2	2022/09/25
cron-ui	1.0.3	1.0.3	2018/10/03
debounce	1.2.1	1.2.1	2021/03/09
echarts	5.3.3	5.4.0	2022/09/25
element-ui	2.15.10	2.15.10	2022/09/13	Changed to Element Plus
emoji-mart-vue-fast	11.2.0	11.2.0	2022/09/08	vue3 support
js-yaml	4.1.0	4.1.0	2021/04/14
lodash.clonedeep	4.5.0	4.5.0	2016/08/13
lodash.get	4.4.2	4.4.2	2016/08/13
lodash.throttle	4.1.1	4.1.1	2016/08/13
moment	2.29.4	2.29.4	2022/07/06
moment-timezone	0.5.37	0.5.37	2022/08/25
normalize.css	8.0.1	8.0.1	2018/11/09
prettycron	0.10.0	0.10.0	2014/11/28
prismjs	1.28.0	1.28.0	2022/04/17
semver	7.3.7	7.3.7	2022/04/12
string-format	2.0.0	2.0.0	2018/05/18
validator	13.7.0	13.7.0	2021/11/01
vue	2.7.10	2.7.10	2022/08/23	vue3
vue-at	2.5.0-beta.2	2.5.0-beta.2	2019/04/30	3.0.0-alpha.2
vue-echarts	6.2.3	6.2.3	2022/07/12	vue3 support
vue-json-pretty	1.8.3	1.8.3 2.1.1	2022/05/11 2022/06/27	2.0.0 or later
vue-native-websocket	2.0.15	2.0.15	2020/08/02	Changed to vue-native-websocket-vue3
vue-prism-component	1.2.0	2.0.0	2021/01/09	2.0.0 or later
vue-query-builder	0.6.1	0.8.2	2020/01/13	Not compatible with vue3
vue-router	3.5.3	3.5.3 4.0.15	2021/11/25 2022/05/04	4.x
vue-split-panel	1.0.4	1.0.4	2018/1/22	Change to coder-vue3-split-panel
vuex	3.6.2	3.6.2 4.0.2	2021/01/26 2021/06/17	4.x
vuex-persist	3.1.3	3.1.3	2020/09/27	Vue 3 Support
webpack	4.46.0	4.46.0 5.74.0	2021/01/12 2022/07/25
zrender	5.4.0	5.4.0	2022/07/25
@vue/cli-plugin-babel	4.5.19	4.5.19 5.0.6	2022/06/28 2022/06/16	4.5.0 or later
@vue/cli-plugin-eslint	4.5.19	4.5.19 5.0.6	2022/06/28 2022/06/16	4.5.0 or later
@vue/cli-plugin-unit-mocha	4.5.19	4.5.19 5.0.6	2022/06/28 2022/06/16	4.5.0 or later
@vue/cli-service	4.5.19	4.5.19 5.0.6	2022/06/28 2022/06/16	4.5.0 or later
@vue/eslint-config-airbnb	5.3.0	6.0.0 supporting eslint 8	2021/11/15
@vue/test-utils	1.3.0	1.3.0 2.0.1	2021/11/17 2022/06/15	2.x
axios-mock-adapter	1.21.2	1.21.2	2022/08/10
@babel/eslint-parser	7.18.2	7.19.1	2022/09/14
babel-plugin-istanbul	6.2.0	6.2.0	2021/10/16
chai	4.3.6	4.3.6	2022/01/26
cross-env	7.0.3	7.0.3 cross-env is "finished" (now in maintenance mode)	2020/12/01
eslint	6.8.0	8.24.0	2022/09/23
eslint-plugin-cypress	2.12.1	2.12.1	2021/09/14
eslint-plugin-import	2.26.0	2.26.0	2022/04/05
eslint-plugin-vue	6.2.2	9.5.1	2022/09/16	7.0.0 or later
@jsdevtools/coverage-istanbul-loader	3.0.5	3.0.5	2020/07/16
jsdom	20.0.0	20.0.0	2022/06/19
localstorage-polyfill	1.0.1	1.0.1	2016/09/14
mutationobserver-simple-polyfill	0.0.2	0.0.2	2017/09/14
sass	1.55.0	1.55.0	2022/09/21
nyc	15.1.0	15.1.0	2020/06/01
sass-loader	10.1.0	13.0.2	2022/06/27	11.0.0 or later ※1
vue-template-compiler	2.7.10	2.7.10	2022/08/23	Use @ vue/compiler-sfc instead of vue-template-compiler
vue-cron-editor-buefy	0.2.17	0.2.17	2021/04/09	Not compatible with vue3 https://github.com/karoletrych/vue-cron-editor/tree/feature/vue3-support

※1
minimum supported webpack version is 5

[nsano-rururu]

@johnsusek

Please comment if you have any ideas for migrating from vue 2 to 3. For example, is there no choice but to maintain praeco with vue2 as it is now? Should it be changed from scratch?

I'm still investigating, but I feel that it may be difficult to give the current praeco to vue3.
https://github.com/johnsusek/praeco/wiki/vue2-%E2%86%92-vue3

[johnsusek]

I think it is possible.

Some thoughts

• Don't need a vue-specific websocket lib, any one that auto reconnects is fine

• Can remove emoji picker

• Idea for split panel: just small css on sidebar div - resize: horizontal + remember sizes in localStorage

• ElementPlus has an infinite scroller component: https://element-plus.org/en-US/component/infinite-scroll.html

• Can use https://element-plus.org/en-US/component/tree-select.html for tree selection

• Remove cron editor, change to plain text input: * * * 5 * etc.

  • Users can build string from e.g. https://www.google.com/search?q=online+crontab+generator

• For query builder.. might be easier to use this: https://querybuilder.js.org/index.html + https://github.com/piotch/jQuery-QueryBuilder-Elasticsearch

  • It is not Vue, but very powerful and a small vue component could be made to wrap it.

[nsano-rururu]

The emoji picker worked normally with vue3, so I think it's okay to leave it as it is

I didn't know that element-plus has infinite scroller and tree-select. Thank you for the information.

[nsano-rururu]

@johnsusek

Build a small app in vue3 and add features and fix bugs to the current vue2 version until you understand how it works.

[nsano-rururu]

https://github.com/johnsusek/praeco/tree/next