Are you eager to migrate your entire codebase to Vue 3 and composition API? Before starting the long journey away from Vue 2.6 you should consider a few intermediate steps:
- compatibility with your dependencies
- tests
- maintainability
- consider a step-by-step migration passing trough Vue 2.7
- what about the Vite/Vitest ecosystem?
The 11 Ultimate Differences You Must Know
The distinction between Vue 2 and Vue 3 is something that is crucial to understand. Continue reading our article on the top 11 most significant differences between Vue 2 and Vue 3.
For More Information: https://www.albiorixtech.com/blog/vue2-vs-vue3-with-top-differences/
I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)
The 11 Ultimate Differences You Must Know
The distinction between Vue 2 and Vue 3 is something that is crucial to understand. Continue reading our article on the top 11 most significant differences between Vue 2 and Vue 3.
For More Information: https://www.albiorixtech.com/blog/vue2-vs-vue3-with-top-differences/
I talked about Vue.js at @agenciasomadev. In this talk I showed the basics about the Vue.js JavaScript Framework and it's simplicity. I hope you enjoy :)
ce cours vous permettra, de découvrir les fondamentaux du framework angular, ainsi apprendre le framwork par pratique, avec des exemple sur chaque model
Vuex to Pinia, how to migrate an existing appDenny Biasiolli
Are you losing your mind trying to convert your Vuex store to Pinia? Here's a step-by-step guide to walk you through this process.
- Brief introduction to Pinia
- Comparison between Vuex and Pinia
- Install and define a Pinia store
- Migrate store module from Vuex to Pinia
- Testing Pinia
- Migrate store usage in components
- Migrate component tests using a mocked store
Les composants angular :
1- Qu’est-ce qu’un composant (Component) ?
2- Angular : Arbre de composants
3- Premier Composant
4- Création d’un composant
5- Option de la Cli Imbrication entre Composants
6- Insérer du contenu externe dans un composant
7- Data Binding
8- Interpolation
9- Property Binding
10- Event Binding
11- Two Way Data Binding
12- Interaction entre composants
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue.
In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive.
The approach I am taking is straightforward:
• I will tell you a little bit about web development, browsers and reactive frameworks
• I will show the hello world of Vue applications
• I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts
• I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections
• We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages
• As bonus topic – we discuss state management
At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3.
Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
Do you hear of Vue.js everywhere lately? With this presentation, you will be able to create your first app in just 30 minutes. Understand the basics and get yourself a solid knowledge to start your journey with the new progressive JavaScript Framework.
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Are you eager to migrate your entire codebase to Vue 3 and composition API? Before starting the long journey away from Vue 2.6 you should consider a few intermediate steps:
compatibility with your dependencies
tests
maintainability
consider a step-by-step migration passing trough Vue 2.7
what about the Vite/Vitest ecosystem?
Ti sei perso nel caos di “props” ed “emit” della tua web app Vue.js? Usa Vuex!
Vuex è lo state manager di Vue.js per eccellenza, una singola fonte di verità che ottimizza la condivisione di informazioni tra componenti.
Vediamo come introdurre facilmente Vuex in progetti esistenti, con un occhio per il testing
ce cours vous permettra, de découvrir les fondamentaux du framework angular, ainsi apprendre le framwork par pratique, avec des exemple sur chaque model
Vuex to Pinia, how to migrate an existing appDenny Biasiolli
Are you losing your mind trying to convert your Vuex store to Pinia? Here's a step-by-step guide to walk you through this process.
- Brief introduction to Pinia
- Comparison between Vuex and Pinia
- Install and define a Pinia store
- Migrate store module from Vuex to Pinia
- Testing Pinia
- Migrate store usage in components
- Migrate component tests using a mocked store
Les composants angular :
1- Qu’est-ce qu’un composant (Component) ?
2- Angular : Arbre de composants
3- Premier Composant
4- Création d’un composant
5- Option de la Cli Imbrication entre Composants
6- Insérer du contenu externe dans un composant
7- Data Binding
8- Interpolation
9- Property Binding
10- Event Binding
11- Two Way Data Binding
12- Interaction entre composants
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue.
In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive.
The approach I am taking is straightforward:
• I will tell you a little bit about web development, browsers and reactive frameworks
• I will show the hello world of Vue applications
• I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts
• I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections
• We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages
• As bonus topic – we discuss state management
At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3.
Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
Do you hear of Vue.js everywhere lately? With this presentation, you will be able to create your first app in just 30 minutes. Understand the basics and get yourself a solid knowledge to start your journey with the new progressive JavaScript Framework.
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Are you eager to migrate your entire codebase to Vue 3 and composition API? Before starting the long journey away from Vue 2.6 you should consider a few intermediate steps:
compatibility with your dependencies
tests
maintainability
consider a step-by-step migration passing trough Vue 2.7
what about the Vite/Vitest ecosystem?
Ti sei perso nel caos di “props” ed “emit” della tua web app Vue.js? Usa Vuex!
Vuex è lo state manager di Vue.js per eccellenza, una singola fonte di verità che ottimizza la condivisione di informazioni tra componenti.
Vediamo come introdurre facilmente Vuex in progetti esistenti, con un occhio per il testing
Stai perdendo la testa cercando di convertire il tuo state manager da Vuex a Pinia?
Ecco una guida step-by-step per affrontare questo task senza difficoltà.
Creating a single page application is an iterative process, where we should aim for the "good enough" and continuously improve it based on the growing requirements. The current Frontend ecosystem gives us multiple tools that we can employ based on the use cases we might discover on the way. In this presentation, we explain our Vue adventure and development approach with this framework.
Aman Mishra from TO THE NEW walks through Vue.Js. It gives an introduction about Vue.js, popularity, size comparison, template syntax, the importance of Vue.js and much more.
The presentation slide for Vue.js meetup
http://abeja-innovation-meetup.connpass.com/event/38214/
That contains mainly about SSR (Server side rendering) + SPA with isomorphic fetch and client hydration
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
Here’s a comprehensive step-by-step tutorial on how to get started with Vue Typescript. Let’s understand building To-do application combining Vue 3 + Typescript.
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend technologies. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming real! In this talk, I am going to discuss Universal (a.k.a. Isomorphic) JavaScript and present some practical example regarding the significant patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
(interactive slides at http://slides.com/lucianomammino/universal-js-web-applications-with-react-codemotion-rome-2017 )
Sharing code in between react components by using render props. HOC and react prop are some of the best ways to share code in react class components.
#hoc #react #renderprop
Django + Vue, JavaScript de 3ª generación para modernizar DjangoJavier Abadía
Slides de la charla que di en la PyConEs 2017 en Cáceres, el 24 de Septiembre.
Explicaba cómo montar un entorno de desarrollo ágil con Django en el back, Vue en el front y webpack para empaquetar el front y proporcionar Hot Module Reloading
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
Is it time to migrate to Vue 3?
1. Is it time to migrate to Vue.js 3.x?
VUEDAY 2022
Verona, November 18th, 2022
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
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)
<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
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
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
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
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
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
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
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
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
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
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
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