Title Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7981072/Tite_slide_Ramona_vuefwdays-1.jpg)
Hello 👋
Ramona Bîscoveanu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/6110810/13640803_1450364891656502_5263193923741763235_o.jpg)
👩🏼💻 Senior Developer @ SAP
@CodesOfRa
📍Côte d'Azur
🧀 🍷🌱
🥳 Vue 3 🥳
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7981087/pasted-from-clipboard.png)
![](https://media4.giphy.com/media/13SbGD4j7TlqZG/giphy.gif)
TypeScript
TypeScript
Vue was re-written in TypeScript → better TypeScript support
✨Reactivity ✨
Vue 2 caveats
- adding or removing an object property
- setting a new array item
- modyfing the length of the array
Setting a new array item
//Vue 2
Vue.set(this.items, indexOfItem, newValue);
Setting a new array item
//Vue 3
this.items[indexOfItem] = newValue
Adding a new object property
//Vue 2
Vue.set(this.someObject, 'color', 'red')
Adding a new object property
//Vue 3
this.someObject.color = "red"
Style Variables
final comments stage
experimental
<template>
<div>
<input v-model="color">
<span class="text">hello</span>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
};
},
};
</script>
<style vars="{ color }">
.text {
color: var(--color);
font-weight: bold;
}
</style>
<template>
<div>
<input v-model="color">
<span class="text">hello</span>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
};
},
};
</script>
<style vars="{ color }">
.text {
color: var(--color);
font-weight: bold;
}
</style>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7982682/6f68596e-e2ae-46fe-a487-ecf3bc0ebe80.gif)
<style scoped vars="{ color }">
.text {
color: var(--color);
}
</style>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1059272/images/7981526/pasted-from-clipboard.png)
<style scoped>
<template>
<div class="main">
<input v-model="color" />
<span class="text">hello</span>
</div>
</template>
<script>
export default {
data() {
return {
color: "red",
font: {
size: "2em",
},
};
},
};
</script>
<style>
.text {
color: v-bind(color);
font-size: v-bind("font.size");
}
</style>
<template>
<div class="main">
<input v-model="color" />
<span class="text">hello</span>
</div>
</template>
<script>
export default {
data() {
return {
color: "red",
font: {
size: "2em",
},
};
},
};
</script>
<style>
.text {
color: v-bind(color);
font-size: v-bind("font.size");
}
</style>
Fragments
<template>
<div>
my very awesome element
</div>
</template>
<template>
<div>
<div>
my very awesome element
</div>
<div>
my very awesome second element
</div>
</div>
</template>
<template>
<div>
<div>
my very awesome element
</div>
<div>
my very awesome second element
</div>
</div>
</template>
<template>
<div>
my very awesome element
</div>
<div>
my very awesome second element
</div>
</template>
![](https://media2.giphy.com/media/YRnTqYjS7TClzFLWPM/giphy.gif)
Teleport
![](https://media2.giphy.com/media/XHqMaKko6p4bTJXNta/giphy.gif)
Use Cases
- Modals
- Notifications
- Dropdown
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
Hello from the teleported modal!
<button @click="modalOpen = false">Close</button>
</div>
</div>
</teleport>
Suspense 😲
![](https://media0.giphy.com/media/UUst5Np9A5xiYJBo0S/giphy.gif)
<Suspense>
<template #default>
...
</template>
<template #fallback>
...
</template>
</Suspense>
<template>
<Suspense>
<template #default>
<MyAsyncComponent />
</template>
<template #fallback>
<loader color="blue" />
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Loader from "@/components/Loader.vue";
const MyAsyncComponent = defineAsyncComponent(() =>
import("@/components/MyAsyncComponent")
);
export default {
components: {
MyAsyncComponent,
Loader,
},
};
</script>
Composition API
Filters 🛑
Removed
v-model
v-model
Multiple v-model bindings on the same component are possible now
<MyComponent
v-model:name="myName"
v-model:location="myLocation"
></MyComponent>
![](https://media3.giphy.com/media/3o7qE5P8TPtfDYyKdi/giphy.gif)
Vue Docs team
Thank you!
![](https://media2.giphy.com/media/xsE65jaPsUKUo/giphy.gif)