SlideShare a Scribd company logo
1 of 75
Download to read offline
Is it time to migrate to Vue.js 3.x?
FOSDEM 2023
Bruxelles, February 5th, 2023
1
WHO AM I
Denny Biasiolli
Full Stack Developer
(JavaScript, Python, Go)
Front End Developer UX/ UI
Fingerprint Supervision Ltd
Italy, Savigliano (CN)
@dennybiasiolli
denny.biasiolli@gmail.com
www.dennybiasiolli.com
2
Vue.js Version Release date
2.6 February 4, 2019
3.0 September 18, 2020
3.1 June 7, 2021
3.2 August 5, 2021
3.x as new default February 7, 2022
2.7 (maintenance mode) July 1, 2022
2.x End of Life End of 2023
3
SEPTEMBER 18, 2020
VUE 3.0 OFFICIALLY ANNOUNCED
Composition API
<script setup> (experimental)
no IE11 support
https://blog.vuejs.org/posts/vue-3-one-piece.html
4
5
OPTIONS API (VUE 2, VUE 3)
export default {
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
},
},
}
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
6
COMPOSITION API IN setup() (VUE 3)
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
},
}
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
7
COMPOSITION API IN setup()
(Vue 2 + @vue/composition-api)
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
- import { ref, ... } from 'vue'
+ import { ref, ... } from '@vue/composition-api'
8
COMPOSITION API IN setup()
(Vue 2 + @vue/composition-api)
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
- import { ref, ... } from 'vue'
+ import { ref, ... } from '@vue/composition-api'
BROKEN TESTS
8.1
COMPOSITION API IN setup()
(Vue 2 + @vue/composition-api)
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
- import { ref, ... } from 'vue'
+ import { ref, ... } from '@vue/composition-api'
BROKEN TESTS
in tests files
Vue.use(VueCompositionAPI)
// or
localVue.use(VueCompositionAPI)
8.2
COMPOSITION API + SCRIPT SETUP
(VUE 3 OR 2.7)
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
9
FEBRUARY 7, 2022
VUE 3 AS NEW DEFAULT
https://blog.vuejs.org/posts/vue-3-as-the-new-default.html
10
POTENTIAL REQUIRED ACTIONS
NPM dependency versions in package.json
Use "^" to bind to a specific major version
"dependencies": {
- "vue": "latest",
+ "vue": "^2.6.14",
- "vue-router": "*",
+ "vue-router": "^3.5.3",
- "vuex": "latest"
+ "vuex": "^3.6.2"
},
"devDependencies": {
- "vue-loader": "latest",
+ "vue-loader": "^15.9.8",
- "@vue/test-utils": "latest"
+ "@vue/test-utils": "^1.3.0"
}
11
SPOILER ALERT
means 2.x
Starting from July 1, 2022
it auto-updates to Vue 2.7
if you don't use explicit package-lock.json or yarn.lock files
to accept only patch releases
"vue": "^2.6.14"
- "vue": "^2.6.14"
+ "vue": "~2.6.14"
12
JULY 1, 2022
VUE 2.7 "NARUTO" RELEASED
Composition API
<script setup> (partial)
https://blog.vuejs.org/posts/vue-2-7-naruto.html
13
14
VUE 2.7 UPGRADE GUIDE
1. Upgrade local @vue/cli-xxx dependencies
Upgrade to the latest version in your major version range (if applicable)
~4.5.18 for v4
~5.0.6 for v5
npx @vue/cli@latest upgrade
15
VUE 2.7 UPGRADE GUIDE
2. Upgrade vue to ^2.7
You can also remove vue-template-compiler from the dependencies,
it is no longer needed in 2.7.
If you are using @vue/test-utils, you may need to keep it in the dependencies for
now, but this requirement will also be lifted in a new release of test utils.
Always keep vue and vue-template-compiler in sync.
npm install -S vue@~2.7
npm install -D vue-template-compiler@~2.7
16
VUE 2.7 UPGRADE GUIDE
3. Check your package manager lockfile
for version requirements
If not, you will need to remove node_modules and the lockfile and perform a fresh install
to ensure they are bumped to the latest version.
npm ls vue-loader # should be at least ^15.10.0
npm ls vue-demi # should be at least ^0.13.1
17
VUE 2.7 UPGRADE GUIDE
4. Remove @vue/composition-api
and update imports to vue instead
npm uninstall @vue/composition-api
- import VueCompositionAPI from '@vue/composition-api'
- Vue.use(VueCompositionAPI)
- import { ref, ... } from '@vue/composition-api'
+ import { ref, ... } from 'vue'
18
More info about Vue 2.7 upgrade
https://blog.vuejs.org/posts/vue-2-7-naruto.html
19
USING <script setup>
- <script>
+ <script setup>
import { ref } from 'vue'
- export default {
- setup() {
const count = ref(0)
function increment() {
count.value++
}
- return { count, increment }
- },
- }
</script>
20
21
Broken vue-router usage!
npm i -S vue-router@^3.6.5
+ import { useRoute, useRouter } from 'vue-router/composables'
+ const route = useRoute()
+ const router = useRouter()
- this.$route
+ route
- this.$router
+ router
22
Same for vuex $store usage?
Import the store and navigate through it
or migrate to pinia
import store from '@/store';
store.state.propertyName
store.state.moduleName.propertyName
store.getters.getterName
store.getters['moduleName/getterName']
store.commit(/* */)
store.dispatch(/* */)
23
24
WHAT ABOUT TESTS?
25
Broken tests!
console.error
[Vue warn]: Property or method "count" is not defined
on the instance but referenced during render.
Make sure that this property is reactive,
either in the data option, or for class-based components,
by initializing the property.
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R
console.error
[Vue warn]: Property or method "increment" is not defined
on the instance but referenced during render.
Make sure that this property is reactive,
either in the data option, or for class-based components,
by initializing the property.
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R
26
Broken tests!
console.error
[Vue warn]: Property or method "count" is not defined
on the instance but referenced during render.
Make sure that this property is reactive,
either in the data option, or for class-based components,
by initializing the property.
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R
console.error
[Vue warn]: Property or method "increment" is not defined
on the instance but referenced during render.
Make sure that this property is reactive,
either in the data option, or for class-based components,
by initializing the property.
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R
@vue/vue2-jest 27.x
not working with Vue 2.7
26.1
SEPTEMBER 15, 2022
@vue/vue2-jest 29.1 released
with support for <script setup>
in Vue 2.7...
27
SEPTEMBER 15, 2022
@vue/vue2-jest 29.1 released
with support for <script setup>
in Vue 2.7...
...with Jest 29
27.1
USING JEST DIRECTLY
update jest.config.js
from node_modules
@vue/cli-plugin-unit-jest/presets/default/jest-preset.js
update package.json test script
run tests without vue-cli-service
- "test:unit": "vue-cli-service test:unit",
+ "test:unit": "jest",
npm run test:unit
# or
npx jest
28
UPGRADING JEST TO 29.X
and fix deprecation warnings
npm uninstall @vue/cli-plugin-unit-jest
npm install -D 
jest-environment-jsdom 
jest-serializer-vue 
jest-transform-stub 
jest-watch-typeahead 
@vue/vue2-jest@^29 
babel-jest@^29 
jest@^29
- testURL: 'http://localhost/',
+ testEnvironmentOptions: {
+ url: 'http://localhost/',
+ },
29
Components using <script setup>
are closed by default
Won't work anymore
const spyIncrement = jest.spyOn(wrapper.vm, 'increment')
defineExpose({ increment }) # not working
30
Components using <script setup>
are closed by default
Won't work anymore
const spyIncrement = jest.spyOn(wrapper.vm, 'increment')
defineExpose({ increment }) # not working
Temporary (not suggested) workaround
// FIXME: temporary workaround
- const spyIncrement = jest.spyOn(wrapper.vm, 'increment')
+ const spyIncrement = jest.spyOn(
+ wrapper.vm._setupState, 'increment')
30.1
COMPONENT TESTING
Test what a component does,
not how it does it.
- // FIXME: temporary workaround
- const spyIncrement = jest.spyOn(
- wrapper.vm._setupState, 'increment')
- wrapper.find('button').trigger('click')
- expect(spyIncrement).toHaveBeenCalled()
+ expect(wrapper.find('p').text()).toBe('Count is: 0')
+ await wrapper.find('button').trigger('click')
+ expect(wrapper.find('p').text()).toBe('Count is: 1')
https://vuejs.org/guide/scaling-up/testing.html#component-testing
31
MIGRATION TO VUE 3
32
MIGRATION TO VUE 3
New Features
Breaking Changes
Recommendations
Migration Build
https://v3-migration.vuejs.org/
33
MIGRATION TO VUE 3
BREAKING CHANGES
While it looks like a lot has changed, a lot of what you know and
love about Vue is still the same; but we wanted to be as thorough
as possible and provide detailed explanations and examples for
every documented change.
https://v3-migration.vuejs.org/breaking-changes/
34
NEW FRAMEWORK-LEVEL RECOMMENDATIONS
New versions of Router, Devtools & test utils
w/ Vue 3 support
Build Toolchain: Vue CLI -> Vite
State Management: Vuex -> Pinia
IDE Support: Vetur -> Volar
...
https://v3-migration.vuejs.org/recommendations.html
35
EASY MIGRATIONS
Devtools
IDE Support: Vetur -> Volar
36
MANDATORY MIGRATIONS
Vue Router
Vuex
Test utils
Third party libraries
(Vuetify, Quasar, ElementUI, etc...)
37
AVOIDABLE MIGRATIONS
Vue CLI -> Vite
Jest -> Vitest
38
MIGRATION BUILD: @vue/compat
build of Vue 3
configurable Vue 2 compatible behavior
runs in Vue 2 mode by default
usage of changed/deprecated features
will emit runtime warnings
https://v3-migration.vuejs.org/migration-build.html
39
KNOWN LIMITATIONS
dependencies that rely on Vue 2 internal APIs
or undocumented behavior.
usage of private properties on VNodes
(Vuetify, Quasar, ElementUI, ...)
IE11 support dropped
Server-side rendering
40
MIGRATION BUILD: EXPECTATIONS
aims to cover only publicly
documented Vue 2 APIs and behavior
if your application is large and
complex, migration will likely be a
challenge even with the migration
build
41
UPGRADE WORKFLOW
1. upgrade tooling if applicable
vue-cli:
custom webpack setup:
upgrade vue-loader to ^16
npx @vue/cli@latest upgrade
42
2. update vue in package.json
"dependencies": {
- "vue": "~2.7",
+ "vue": "^3.2.39",
+ "@vue/compat": "^3.2.39"
...
},
"devDependencies": {
- "vue-template-compiler": "~2.7"
}
npm i -S vue@^3.2 @vue/compat@^3.2 --force
npm uninstall vue-template-compiler --force
43
3.1. alias vue to @vue/compat
Webpack or Vite config on
// vue.config.js
module.exports = {
// ...
chainWebpack: (config) => {
config.resolve.alias.set('vue', '@vue/compat')
// ...
}
}
https://v3-migration.vuejs.org/migration-build.html
44
3.2. enable compat mode via Vue compiler options
Webpack or Vite config on
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
https://v3-migration.vuejs.org/migration-build.html
45
4. if using TypeScript, update vue's typing
declare module 'vue' {
import { CompatVue } from '@vue/runtime-dom'
const Vue: CompatVue
export default Vue
export * from '@vue/runtime-dom'
const { configureCompat } = Vue
export { configureCompat }
}
46
5. fix compile-time errors
When compiler warnings are gone, you can set the
compiler to Vue 3 mode
compilerOptions: {
compatConfig: {
MODE: 3
}
}
47
6. Run the app
48
6. Run the app
the app should be able to run
if no limitations mentioned above
focus on fixing your own source code warnings first
49
7. Update <transition> class names
This feature does not have a runtime warning.
Search for `.*-enter` and `.*-leave` CSS class names
- .*-enter
+ .*-enter-from
- .*-leave
+ .*-leave-to
50
8. Update app entry to use new global mounting API
- import Vue from 'vue'
+ import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
- Vue.config.productionTip = false
- new Vue({
+ const app = createApp({
router,
store,
- render: h => h(App)
+ ...App,
- }).$mount('#app')
+ })
+ app.mount('#app')
51
9. Upgrade vuex to v4
npm i -S vuex@^4 --force
https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html
52
9. Upgrade vuex to v4
// src/store/index.js
- import Vue from 'vue'
- import Vuex from 'vuex'
+ import { createStore } from 'vuex'
- Vue.use(Vuex)
- export default new Vuex.Store({
+ export default createStore({
- state: {
- count: 0,
+ state() {
+ return {
+ count: 0,
+ };
},
// ...
53
9. Upgrade vuex to v4
// src/main.js
import store from './store'
const app = createApp({
router,
- store,
...App,
})
+ app.use(store)
54
9. Upgrade vuex to v4
Composition API usage
import { useStore } from 'vuex'
const store = useStore()
55
10. Upgrade vue-router to v4
npm i -S vue-router@^4 --force
https://router.vuejs.org/guide/migration/index.html
56
10. Upgrade vue-router to v4
// src/router/index.js
- import Vue from 'vue'
- import VueRouter from 'vue-router'
+ import { createRouter, createWebHistory } from 'vue-router'
- Vue.use(Vuex)
const routes = [
// ...
]
- const default new VueRouter({
+ export default createRouter({
- mode: 'history',
- base: process.env.BASE_URL,
+ history: createWebHistory(process.env.BASE_URL),
routes
})
57
10. Upgrade vue-router to v4
// src/main.js
import router from './router'
const app = createApp({
- router,
...App,
})
+ app.use(router)
58
10. Upgrade vue-router to v4
Composition API usage
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
59
11. Pick off individual warnings (if any)
Always refer to the doc.
https://v3-migration.vuejs.org/
60
12. Remove the migration build and switch to Vue 3
when all warnings are fixed.
Note you may not be able to do so if you still have
dependencies that rely on Vue 2 behavior.
npm uninstall @vue/compat --force
61
62
BROKEN TESTS!
Upgrade testing packages
npm uninstall @vue/vue2-jest --force
npm i -D @vue/vue3-jest@^29 --force
npm i -D @vue/test-utils@^2 --force
// jest.config.js
transform: {
- '^.+.vue$': '@vue/vue2-jest',
+ '^.+.vue$': '@vue/vue3-jest',
https://test-utils.vuejs.org/migration/
63
VUE TEST UTILS V2 CHANGES
propsData is now props
no more createLocalVue
mocks and stubs are now in global
findAll().at() removed
use findAll()[]
...
https://test-utils.vuejs.org/migration/
64
SOLVING TEST ERRORS/WARNINGS
Solution
console.warn
[Vue warn]: Avoid app logic that relies
on enumerating keys on a component instance.
The keys will be empty in production mode
to avoid performance overhead.
- expect(wrapper).toMatchSnapshot()
+ expect(wrapper.html()).toMatchSnapshot()
65
SOLVING TEST ERRORS/WARNINGS
Solution
ReferenceError: Vue is not defined
> 1 | import { shallowMount } from '@vue/test-utils';
| ^
// jest.config.js
testEnvironmentOptions: {
customExportConditions: ["node", "node-addons"],
},
https://github.com/vuejs/vue-jest/issues/479#issuecomment-1163421581
https://stackoverflow.com/a/72608494/3963422
66
67
RECAP
Vue 2.6 + @vue/composition-api
Composition API (setup() only)
Vue 2.6 → 2.7
Composition API
<script setup>
Vue 2.x → 3.x
long term support for your codebase
68
THANK YOU!
|
|
migrate-to-vue3 branch
@dennybiasiolli
blog.vuejs.org vuejs.org
v3-migration.vuejs.org
vuex.vuejs.org router.vuejs.org
test-utils.vuejs.org
github.com/dennybiasiolli/vue-migration-2-to-3
www.dennybiasiolli.com
69
Is it time to migrate to Vue 3?

More Related Content

What's hot

Containerd + buildkit breakout
Containerd + buildkit breakoutContainerd + buildkit breakout
Containerd + buildkit breakoutDocker, Inc.
 
Cloud Composer workshop at Airflow Summit 2023.pdf
Cloud Composer workshop at Airflow Summit 2023.pdfCloud Composer workshop at Airflow Summit 2023.pdf
Cloud Composer workshop at Airflow Summit 2023.pdfLeah Cole
 
Azure Pipeline Tutorial | Azure DevOps Tutorial | Edureka
Azure Pipeline Tutorial | Azure DevOps Tutorial | EdurekaAzure Pipeline Tutorial | Azure DevOps Tutorial | Edureka
Azure Pipeline Tutorial | Azure DevOps Tutorial | EdurekaEdureka!
 
Configuration management I - Ansible + Packer
Configuration management I - Ansible + PackerConfiguration management I - Ansible + Packer
Configuration management I - Ansible + PackerXavier Serrat Bordas
 
Red Hat Satellite 6 - Automation with Puppet
Red Hat Satellite 6 - Automation with PuppetRed Hat Satellite 6 - Automation with Puppet
Red Hat Satellite 6 - Automation with PuppetMichael Lessard
 
Introduction of CCE and DevCloud
Introduction of CCE and DevCloudIntroduction of CCE and DevCloud
Introduction of CCE and DevCloudOpsta
 
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016Amazon Web Services Korea
 
Lifecycle of a pod
Lifecycle of a podLifecycle of a pod
Lifecycle of a podHarshal Shah
 
CKA Certified Kubernetes Administrator Notes
CKA Certified Kubernetes Administrator Notes CKA Certified Kubernetes Administrator Notes
CKA Certified Kubernetes Administrator Notes Adnan Rashid
 
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)Amazon Web Services Korea
 
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?Miguel Araújo
 
Oracle Drivers configuration for High Availability, is it a developer's job?
Oracle Drivers configuration for High Availability, is it a developer's job?Oracle Drivers configuration for High Availability, is it a developer's job?
Oracle Drivers configuration for High Availability, is it a developer's job?Ludovico Caldara
 
nexus helm 설치, docker/helm repo 설정과 예제
nexus helm 설치, docker/helm repo 설정과 예제nexus helm 설치, docker/helm repo 설정과 예제
nexus helm 설치, docker/helm repo 설정과 예제choi sungwook
 
(CMP402) Amazon EC2 Instances Deep Dive
(CMP402) Amazon EC2 Instances Deep Dive(CMP402) Amazon EC2 Instances Deep Dive
(CMP402) Amazon EC2 Instances Deep DiveAmazon Web Services
 
VPC Design and New Capabilities for Amazon VPC
VPC Design and New Capabilities for Amazon VPCVPC Design and New Capabilities for Amazon VPC
VPC Design and New Capabilities for Amazon VPCAmazon Web Services
 

What's hot (20)

Containerd + buildkit breakout
Containerd + buildkit breakoutContainerd + buildkit breakout
Containerd + buildkit breakout
 
Cloud Composer workshop at Airflow Summit 2023.pdf
Cloud Composer workshop at Airflow Summit 2023.pdfCloud Composer workshop at Airflow Summit 2023.pdf
Cloud Composer workshop at Airflow Summit 2023.pdf
 
Intro to Amazon ECS
Intro to Amazon ECSIntro to Amazon ECS
Intro to Amazon ECS
 
Azure Pipeline Tutorial | Azure DevOps Tutorial | Edureka
Azure Pipeline Tutorial | Azure DevOps Tutorial | EdurekaAzure Pipeline Tutorial | Azure DevOps Tutorial | Edureka
Azure Pipeline Tutorial | Azure DevOps Tutorial | Edureka
 
Configuration management I - Ansible + Packer
Configuration management I - Ansible + PackerConfiguration management I - Ansible + Packer
Configuration management I - Ansible + Packer
 
AWS CloudFormation Masterclass
AWS CloudFormation MasterclassAWS CloudFormation Masterclass
AWS CloudFormation Masterclass
 
Cognito Customer Deep Dive
Cognito Customer Deep DiveCognito Customer Deep Dive
Cognito Customer Deep Dive
 
Red Hat Satellite 6 - Automation with Puppet
Red Hat Satellite 6 - Automation with PuppetRed Hat Satellite 6 - Automation with Puppet
Red Hat Satellite 6 - Automation with Puppet
 
Introduction of CCE and DevCloud
Introduction of CCE and DevCloudIntroduction of CCE and DevCloud
Introduction of CCE and DevCloud
 
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016
빅데이터를 위한 AWS 모범사례와 아키텍처 구축 패턴 :: 양승도 :: AWS Summit Seoul 2016
 
Lifecycle of a pod
Lifecycle of a podLifecycle of a pod
Lifecycle of a pod
 
Terraform
TerraformTerraform
Terraform
 
CKA Certified Kubernetes Administrator Notes
CKA Certified Kubernetes Administrator Notes CKA Certified Kubernetes Administrator Notes
CKA Certified Kubernetes Administrator Notes
 
AWS Fargate on EKS 실전 사용하기
AWS Fargate on EKS 실전 사용하기AWS Fargate on EKS 실전 사용하기
AWS Fargate on EKS 실전 사용하기
 
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)
AWS Batch를 통한 손쉬운 일괄 처리 작업 관리하기 - 윤석찬 (AWS 테크에반젤리스트)
 
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?
Disaster Recovery with MySQL InnoDB ClusterSet - What is it and how do I use it?
 
Oracle Drivers configuration for High Availability, is it a developer's job?
Oracle Drivers configuration for High Availability, is it a developer's job?Oracle Drivers configuration for High Availability, is it a developer's job?
Oracle Drivers configuration for High Availability, is it a developer's job?
 
nexus helm 설치, docker/helm repo 설정과 예제
nexus helm 설치, docker/helm repo 설정과 예제nexus helm 설치, docker/helm repo 설정과 예제
nexus helm 설치, docker/helm repo 설정과 예제
 
(CMP402) Amazon EC2 Instances Deep Dive
(CMP402) Amazon EC2 Instances Deep Dive(CMP402) Amazon EC2 Instances Deep Dive
(CMP402) Amazon EC2 Instances Deep Dive
 
VPC Design and New Capabilities for Amazon VPC
VPC Design and New Capabilities for Amazon VPCVPC Design and New Capabilities for Amazon VPC
VPC Design and New Capabilities for Amazon VPC
 

Similar to Is it time to migrate to Vue 3?

Is it time to migrate to Vue 3?
Is it time to migrate to Vue 3?Is it time to migrate to Vue 3?
Is it time to migrate to Vue 3?Denny Biasiolli
 
Introducing Vuex in your project
Introducing Vuex in your projectIntroducing Vuex in your project
Introducing Vuex in your projectDenny Biasiolli
 
State manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to VuexState manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to VuexCommit University
 
Vuex to Pinia, how to migrate an existing app
Vuex to Pinia, how to migrate an existing appVuex to Pinia, how to migrate an existing app
Vuex to Pinia, how to migrate an existing appDenny Biasiolli
 
Da Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazioneDa Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazioneCommit University
 
Vue JS @ MindDoc. The progressive road to online therapy
Vue JS @ MindDoc. The progressive road to online therapyVue JS @ MindDoc. The progressive road to online therapy
Vue JS @ MindDoc. The progressive road to online therapyDarío Blanco Iturriaga
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexChristoffer Noring
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0Takuya Tejima
 
Making React Native UI Components with Swift
Making React Native UI Components with SwiftMaking React Native UI Components with Swift
Making React Native UI Components with SwiftRay Deck
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
 
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfHow to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfKaty Slemon
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
 
How to build to do app using vue composition api and vuex 4 with typescript
How to build to do app using vue composition api and vuex 4 with typescriptHow to build to do app using vue composition api and vuex 4 with typescript
How to build to do app using vue composition api and vuex 4 with typescriptKaty Slemon
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.tothepointIT
 

Similar to Is it time to migrate to Vue 3? (20)

Is it time to migrate to Vue 3?
Is it time to migrate to Vue 3?Is it time to migrate to Vue 3?
Is it time to migrate to Vue 3?
 
Introducing Vuex in your project
Introducing Vuex in your projectIntroducing Vuex in your project
Introducing Vuex in your project
 
State manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to VuexState manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to Vuex
 
Vuex to Pinia, how to migrate an existing app
Vuex to Pinia, how to migrate an existing appVuex to Pinia, how to migrate an existing app
Vuex to Pinia, how to migrate an existing app
 
Da Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazioneDa Vuex a Pinia: come fare la migrazione
Da Vuex a Pinia: come fare la migrazione
 
Vue JS @ MindDoc. The progressive road to online therapy
Vue JS @ MindDoc. The progressive road to online therapyVue JS @ MindDoc. The progressive road to online therapy
Vue JS @ MindDoc. The progressive road to online therapy
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and Vuex
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs
 
Making React Native UI Components with Swift
Making React Native UI Components with SwiftMaking React Native UI Components with Swift
Making React Native UI Components with Swift
 
Vue.js part1
Vue.js part1Vue.js part1
Vue.js part1
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
 
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdfHow to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdf
 
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
 
React render props
React render propsReact render props
React render props
 
How to build to do app using vue composition api and vuex 4 with typescript
How to build to do app using vue composition api and vuex 4 with typescriptHow to build to do app using vue composition api and vuex 4 with typescript
How to build to do app using vue composition api and vuex 4 with typescript
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
 

Recently uploaded

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 

Recently uploaded (20)

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 

Is it time to migrate to Vue 3?

  • 1. Is it time to migrate to Vue.js 3.x? FOSDEM 2023 Bruxelles, February 5th, 2023 1
  • 2. WHO AM I Denny Biasiolli Full Stack Developer (JavaScript, Python, Go) Front End Developer UX/ UI Fingerprint Supervision Ltd Italy, Savigliano (CN) @dennybiasiolli denny.biasiolli@gmail.com www.dennybiasiolli.com 2
  • 3. Vue.js Version Release date 2.6 February 4, 2019 3.0 September 18, 2020 3.1 June 7, 2021 3.2 August 5, 2021 3.x as new default February 7, 2022 2.7 (maintenance mode) July 1, 2022 2.x End of Life End of 2023 3
  • 4. SEPTEMBER 18, 2020 VUE 3.0 OFFICIALLY ANNOUNCED Composition API <script setup> (experimental) no IE11 support https://blog.vuejs.org/posts/vue-3-one-piece.html 4
  • 5. 5
  • 6. OPTIONS API (VUE 2, VUE 3) export default { data() { return { count: 0 } }, methods: { increment() { this.count++ }, }, } <template> <button @click="increment">Count is: {{ count }}</button> </template> 6
  • 7. COMPOSITION API IN setup() (VUE 3) <script> import { ref } from 'vue' export default { setup() { const count = ref(0) function increment() { count.value++ } return { count, increment } }, } <template> <button @click="increment">Count is: {{ count }}</button> </template> 7
  • 8. COMPOSITION API IN setup() (Vue 2 + @vue/composition-api) import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) - import { ref, ... } from 'vue' + import { ref, ... } from '@vue/composition-api' 8
  • 9. COMPOSITION API IN setup() (Vue 2 + @vue/composition-api) import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) - import { ref, ... } from 'vue' + import { ref, ... } from '@vue/composition-api' BROKEN TESTS 8.1
  • 10. COMPOSITION API IN setup() (Vue 2 + @vue/composition-api) import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) - import { ref, ... } from 'vue' + import { ref, ... } from '@vue/composition-api' BROKEN TESTS in tests files Vue.use(VueCompositionAPI) // or localVue.use(VueCompositionAPI) 8.2
  • 11. COMPOSITION API + SCRIPT SETUP (VUE 3 OR 2.7) <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template> 9
  • 12. FEBRUARY 7, 2022 VUE 3 AS NEW DEFAULT https://blog.vuejs.org/posts/vue-3-as-the-new-default.html 10
  • 13. POTENTIAL REQUIRED ACTIONS NPM dependency versions in package.json Use "^" to bind to a specific major version "dependencies": { - "vue": "latest", + "vue": "^2.6.14", - "vue-router": "*", + "vue-router": "^3.5.3", - "vuex": "latest" + "vuex": "^3.6.2" }, "devDependencies": { - "vue-loader": "latest", + "vue-loader": "^15.9.8", - "@vue/test-utils": "latest" + "@vue/test-utils": "^1.3.0" } 11
  • 14. SPOILER ALERT means 2.x Starting from July 1, 2022 it auto-updates to Vue 2.7 if you don't use explicit package-lock.json or yarn.lock files to accept only patch releases "vue": "^2.6.14" - "vue": "^2.6.14" + "vue": "~2.6.14" 12
  • 15. JULY 1, 2022 VUE 2.7 "NARUTO" RELEASED Composition API <script setup> (partial) https://blog.vuejs.org/posts/vue-2-7-naruto.html 13
  • 16. 14
  • 17. VUE 2.7 UPGRADE GUIDE 1. Upgrade local @vue/cli-xxx dependencies Upgrade to the latest version in your major version range (if applicable) ~4.5.18 for v4 ~5.0.6 for v5 npx @vue/cli@latest upgrade 15
  • 18. VUE 2.7 UPGRADE GUIDE 2. Upgrade vue to ^2.7 You can also remove vue-template-compiler from the dependencies, it is no longer needed in 2.7. If you are using @vue/test-utils, you may need to keep it in the dependencies for now, but this requirement will also be lifted in a new release of test utils. Always keep vue and vue-template-compiler in sync. npm install -S vue@~2.7 npm install -D vue-template-compiler@~2.7 16
  • 19. VUE 2.7 UPGRADE GUIDE 3. Check your package manager lockfile for version requirements If not, you will need to remove node_modules and the lockfile and perform a fresh install to ensure they are bumped to the latest version. npm ls vue-loader # should be at least ^15.10.0 npm ls vue-demi # should be at least ^0.13.1 17
  • 20. VUE 2.7 UPGRADE GUIDE 4. Remove @vue/composition-api and update imports to vue instead npm uninstall @vue/composition-api - import VueCompositionAPI from '@vue/composition-api' - Vue.use(VueCompositionAPI) - import { ref, ... } from '@vue/composition-api' + import { ref, ... } from 'vue' 18
  • 21. More info about Vue 2.7 upgrade https://blog.vuejs.org/posts/vue-2-7-naruto.html 19
  • 22. USING <script setup> - <script> + <script setup> import { ref } from 'vue' - export default { - setup() { const count = ref(0) function increment() { count.value++ } - return { count, increment } - }, - } </script> 20
  • 23. 21
  • 24. Broken vue-router usage! npm i -S vue-router@^3.6.5 + import { useRoute, useRouter } from 'vue-router/composables' + const route = useRoute() + const router = useRouter() - this.$route + route - this.$router + router 22
  • 25. Same for vuex $store usage? Import the store and navigate through it or migrate to pinia import store from '@/store'; store.state.propertyName store.state.moduleName.propertyName store.getters.getterName store.getters['moduleName/getterName'] store.commit(/* */) store.dispatch(/* */) 23
  • 26. 24
  • 28. Broken tests! console.error [Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R console.error [Vue warn]: Property or method "increment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R 26
  • 29. Broken tests! console.error [Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R console.error [Vue warn]: Property or method "increment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-R @vue/vue2-jest 27.x not working with Vue 2.7 26.1
  • 30. SEPTEMBER 15, 2022 @vue/vue2-jest 29.1 released with support for <script setup> in Vue 2.7... 27
  • 31. SEPTEMBER 15, 2022 @vue/vue2-jest 29.1 released with support for <script setup> in Vue 2.7... ...with Jest 29 27.1
  • 32. USING JEST DIRECTLY update jest.config.js from node_modules @vue/cli-plugin-unit-jest/presets/default/jest-preset.js update package.json test script run tests without vue-cli-service - "test:unit": "vue-cli-service test:unit", + "test:unit": "jest", npm run test:unit # or npx jest 28
  • 33. UPGRADING JEST TO 29.X and fix deprecation warnings npm uninstall @vue/cli-plugin-unit-jest npm install -D jest-environment-jsdom jest-serializer-vue jest-transform-stub jest-watch-typeahead @vue/vue2-jest@^29 babel-jest@^29 jest@^29 - testURL: 'http://localhost/', + testEnvironmentOptions: { + url: 'http://localhost/', + }, 29
  • 34. Components using <script setup> are closed by default Won't work anymore const spyIncrement = jest.spyOn(wrapper.vm, 'increment') defineExpose({ increment }) # not working 30
  • 35. Components using <script setup> are closed by default Won't work anymore const spyIncrement = jest.spyOn(wrapper.vm, 'increment') defineExpose({ increment }) # not working Temporary (not suggested) workaround // FIXME: temporary workaround - const spyIncrement = jest.spyOn(wrapper.vm, 'increment') + const spyIncrement = jest.spyOn( + wrapper.vm._setupState, 'increment') 30.1
  • 36. COMPONENT TESTING Test what a component does, not how it does it. - // FIXME: temporary workaround - const spyIncrement = jest.spyOn( - wrapper.vm._setupState, 'increment') - wrapper.find('button').trigger('click') - expect(spyIncrement).toHaveBeenCalled() + expect(wrapper.find('p').text()).toBe('Count is: 0') + await wrapper.find('button').trigger('click') + expect(wrapper.find('p').text()).toBe('Count is: 1') https://vuejs.org/guide/scaling-up/testing.html#component-testing 31
  • 38. MIGRATION TO VUE 3 New Features Breaking Changes Recommendations Migration Build https://v3-migration.vuejs.org/ 33
  • 39. MIGRATION TO VUE 3 BREAKING CHANGES While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change. https://v3-migration.vuejs.org/breaking-changes/ 34
  • 40. NEW FRAMEWORK-LEVEL RECOMMENDATIONS New versions of Router, Devtools & test utils w/ Vue 3 support Build Toolchain: Vue CLI -> Vite State Management: Vuex -> Pinia IDE Support: Vetur -> Volar ... https://v3-migration.vuejs.org/recommendations.html 35
  • 42. MANDATORY MIGRATIONS Vue Router Vuex Test utils Third party libraries (Vuetify, Quasar, ElementUI, etc...) 37
  • 43. AVOIDABLE MIGRATIONS Vue CLI -> Vite Jest -> Vitest 38
  • 44. MIGRATION BUILD: @vue/compat build of Vue 3 configurable Vue 2 compatible behavior runs in Vue 2 mode by default usage of changed/deprecated features will emit runtime warnings https://v3-migration.vuejs.org/migration-build.html 39
  • 45. KNOWN LIMITATIONS dependencies that rely on Vue 2 internal APIs or undocumented behavior. usage of private properties on VNodes (Vuetify, Quasar, ElementUI, ...) IE11 support dropped Server-side rendering 40
  • 46. MIGRATION BUILD: EXPECTATIONS aims to cover only publicly documented Vue 2 APIs and behavior if your application is large and complex, migration will likely be a challenge even with the migration build 41
  • 47. UPGRADE WORKFLOW 1. upgrade tooling if applicable vue-cli: custom webpack setup: upgrade vue-loader to ^16 npx @vue/cli@latest upgrade 42
  • 48. 2. update vue in package.json "dependencies": { - "vue": "~2.7", + "vue": "^3.2.39", + "@vue/compat": "^3.2.39" ... }, "devDependencies": { - "vue-template-compiler": "~2.7" } npm i -S vue@^3.2 @vue/compat@^3.2 --force npm uninstall vue-template-compiler --force 43
  • 49. 3.1. alias vue to @vue/compat Webpack or Vite config on // vue.config.js module.exports = { // ... chainWebpack: (config) => { config.resolve.alias.set('vue', '@vue/compat') // ... } } https://v3-migration.vuejs.org/migration-build.html 44
  • 50. 3.2. enable compat mode via Vue compiler options Webpack or Vite config on config.module .rule('vue') .use('vue-loader') .tap((options) => { return { ...options, compilerOptions: { compatConfig: { MODE: 2 } } } }) https://v3-migration.vuejs.org/migration-build.html 45
  • 51. 4. if using TypeScript, update vue's typing declare module 'vue' { import { CompatVue } from '@vue/runtime-dom' const Vue: CompatVue export default Vue export * from '@vue/runtime-dom' const { configureCompat } = Vue export { configureCompat } } 46
  • 52. 5. fix compile-time errors When compiler warnings are gone, you can set the compiler to Vue 3 mode compilerOptions: { compatConfig: { MODE: 3 } } 47
  • 53. 6. Run the app 48
  • 54. 6. Run the app the app should be able to run if no limitations mentioned above focus on fixing your own source code warnings first 49
  • 55. 7. Update <transition> class names This feature does not have a runtime warning. Search for `.*-enter` and `.*-leave` CSS class names - .*-enter + .*-enter-from - .*-leave + .*-leave-to 50
  • 56. 8. Update app entry to use new global mounting API - import Vue from 'vue' + import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' - Vue.config.productionTip = false - new Vue({ + const app = createApp({ router, store, - render: h => h(App) + ...App, - }).$mount('#app') + }) + app.mount('#app') 51
  • 57. 9. Upgrade vuex to v4 npm i -S vuex@^4 --force https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html 52
  • 58. 9. Upgrade vuex to v4 // src/store/index.js - import Vue from 'vue' - import Vuex from 'vuex' + import { createStore } from 'vuex' - Vue.use(Vuex) - export default new Vuex.Store({ + export default createStore({ - state: { - count: 0, + state() { + return { + count: 0, + }; }, // ... 53
  • 59. 9. Upgrade vuex to v4 // src/main.js import store from './store' const app = createApp({ router, - store, ...App, }) + app.use(store) 54
  • 60. 9. Upgrade vuex to v4 Composition API usage import { useStore } from 'vuex' const store = useStore() 55
  • 61. 10. Upgrade vue-router to v4 npm i -S vue-router@^4 --force https://router.vuejs.org/guide/migration/index.html 56
  • 62. 10. Upgrade vue-router to v4 // src/router/index.js - import Vue from 'vue' - import VueRouter from 'vue-router' + import { createRouter, createWebHistory } from 'vue-router' - Vue.use(Vuex) const routes = [ // ... ] - const default new VueRouter({ + export default createRouter({ - mode: 'history', - base: process.env.BASE_URL, + history: createWebHistory(process.env.BASE_URL), routes }) 57
  • 63. 10. Upgrade vue-router to v4 // src/main.js import router from './router' const app = createApp({ - router, ...App, }) + app.use(router) 58
  • 64. 10. Upgrade vue-router to v4 Composition API usage import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() 59
  • 65. 11. Pick off individual warnings (if any) Always refer to the doc. https://v3-migration.vuejs.org/ 60
  • 66. 12. Remove the migration build and switch to Vue 3 when all warnings are fixed. Note you may not be able to do so if you still have dependencies that rely on Vue 2 behavior. npm uninstall @vue/compat --force 61
  • 67. 62
  • 68. BROKEN TESTS! Upgrade testing packages npm uninstall @vue/vue2-jest --force npm i -D @vue/vue3-jest@^29 --force npm i -D @vue/test-utils@^2 --force // jest.config.js transform: { - '^.+.vue$': '@vue/vue2-jest', + '^.+.vue$': '@vue/vue3-jest', https://test-utils.vuejs.org/migration/ 63
  • 69. VUE TEST UTILS V2 CHANGES propsData is now props no more createLocalVue mocks and stubs are now in global findAll().at() removed use findAll()[] ... https://test-utils.vuejs.org/migration/ 64
  • 70. SOLVING TEST ERRORS/WARNINGS Solution console.warn [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead. - expect(wrapper).toMatchSnapshot() + expect(wrapper.html()).toMatchSnapshot() 65
  • 71. SOLVING TEST ERRORS/WARNINGS Solution ReferenceError: Vue is not defined > 1 | import { shallowMount } from '@vue/test-utils'; | ^ // jest.config.js testEnvironmentOptions: { customExportConditions: ["node", "node-addons"], }, https://github.com/vuejs/vue-jest/issues/479#issuecomment-1163421581 https://stackoverflow.com/a/72608494/3963422 66
  • 72. 67
  • 73. RECAP Vue 2.6 + @vue/composition-api Composition API (setup() only) Vue 2.6 → 2.7 Composition API <script setup> Vue 2.x → 3.x long term support for your codebase 68
  • 74. THANK YOU! | | migrate-to-vue3 branch @dennybiasiolli blog.vuejs.org vuejs.org v3-migration.vuejs.org vuex.vuejs.org router.vuejs.org test-utils.vuejs.org github.com/dennybiasiolli/vue-migration-2-to-3 www.dennybiasiolli.com 69