vueschool.io

@vueschool_io

Alex

Kyriakidis

Author of The Majesty of Vue.js 1 & 2

Founder & Teacher @ Vue School

Enterprise Consultant

Vue.js Contributor

@hootlex

Amsterdam

@hootlex

@hootlex

#1 Learning Resource for Vue.js

Our goal

300+ Video Lessons

80000 users

Alex Kyriakidis

Rolf Haug

Debbie O'Brien

Chris Fritz

Maria Lamardo

Roman Kuba

Bart Ledoux

Filip Rakowski

Alexander Lichter

Lydia Hallie

vueschool.io

Workshops

What you'll ❤️ in Vue 3

@hootlex

Vue.js

@hootlex

Vue is Young and Famous

Vue is Easy to Use and Learn

@hootlex

Vue is Easy to Use and Learn

https://2018.stateofjs.com/front-end-frameworks/vuejs/

Vue.js

Vue is Easy to Use and Learn

https://2018.stateofjs.com/front-end-frameworks/react/

React

Vue is Easy to Use and Learn

https://monterail.com/state-of-vuejs-report

Vue is Good!

  • Lightweight (20KB min+gzip)
  • Performant
  • Scalable

@hootlex

Vue is Options based

new Vue({
  data: {
    loading: false,
    count: 0,
    user: {}
  },
  computed: {
    double () { return this.count * 2 },
    fullname () {/* ... */}
  },
  methods: {
    increment () { this.count++ },
    fetchUser () {/* ... */}
  }
})

@hootlex

Vue 3

@hootlex

Vue 3

🐜 smaller + 🏃‍♀️ faster

📐 improved TypeScript support

🏛 more maintainable codebase

🧱 exposes lower level APIs

⭐️ new features

@hootlex

Vue 3

📅 coming In a few Months

🤙 most user code remains the same

🏷 RC

@hootlex

What you'll ❤️ in Vue 3

@hootlex

No Reactivity Caveats 👀

@hootlex

Current Reactivity Caveats

  • setting a new array item
  • adding a new object property
  • deleting an object property

@hootlex

Setting a new array item

// Vue 2
Vue.set(this.characters, index, leela)

// Vue 3
this.characters[index] = leela

Adding a new object property

// Vue 2
Vue.set(this.character, 'lastname', 'Turanga')

// Vue 3
this.character.lastname = 'Turanga'

Deleting an object property 

// Vue 2
Vue.delete(this.character, 'lastname')

// Vue 3
delete this.character.lastname

Awesome?

@hootlex

Teleport 🕳

@hootlex

@hootlex

Teleport: Target

<template>
  <div>
    <router-view>
    <div id="teleport-target"></div>
  </div>
</template>

App.vue

@hootlex

Teleport: Source

<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>  
    <button @click="delete">Remove user</button>
    
    <Teleport to="#teleport-target">
      <div>This will be rendered inside target!</div>
    </Teleport>
  </div>
</template>

UserCard.vue

@hootlex

Target + Source

<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>  
    <button @click="delete">Remove user</button>
    
    <Teleport to="#portal-target">
      <div>This will be rendered inside target!</div>
    </Teleport>
  </div>
</template>

UserCard.vue

<template>
  <div>
    <router-view>
    <div id="teleport-target"></div>
  </div>
</template>

App.vue

@hootlex

@hootlex

@hootlex

Teleport: Use Cases

  • layout content like within sidebar, menu, footer

  • modals, notifications, and popups

@hootlex

Can't wait?

portal-vue plugin

https://portal-vue.linusb.org/

by Thorsten Lünborg

 

@hootlex

Multiple Root Nodes 🩰

@hootlex

Sounds familiar? 😬

<template>
  <div>...</div>
  <div>...</div>
</template>

UserCard.vue

@hootlex

In Vue 3

@hootlex

In Vue 3 

<template>
  <div>
    <div>...</div>
    <div>...</div>
  </div>
</template>

UserCard.vue

<template>
  <div>...</div>
  <div>...</div>
</template>

UserCard.vue

It works ✅

No need 💁‍♂️

@hootlex

v-model API change 🔶

@hootlex

v-model API change 🔶

<InviteeForm v-model="name"/>
<InviteeForm v-model:name="anyData"/>

@hootlex

@hootlex

multiple v-models

<InviteeForm
  v-model:name="inviteeName"
/>
<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
/>
<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
  v-model:location="inviteeLocation"
  v-model:date="eventDate"
  v-model:confirmation="confirmation"
/>

@hootlex

@hootlex

Vue 3

🧱 Composition API

@hootlex

🧱 Composition API

🆕 advanced feature

🚑 options API is not being deprecated

➕ addition to the current API

(RFC Status)

@hootlex

Why Composition API

♻️ Logic Reuse

🗂 Code Organization

📐 TypeScript Support

@hootlex

Composition API Benefits

  • extremely flexible
  • clear source of properties
  • performance
  • no namespace collision

@hootlex

Good Fit For

  • component code grows too long
  • team that work on the same (big) components
  • reuse component options without using mixins
  • when TypeScript support is important

(own opinion)

@hootlex

Drawbacks of Composition API

(own opinion)

  • overhead of introducing refs

  • no shared template

  • learning curve

@hootlex

Consider 🙏

  • no need to rewrite your Vue 2 app
  • no need to use it in a simple component
  • keep the junior devs in mind

(own opinion)

@hootlex

Suspense

@hootlex

Suspense

renders some fallback content instead of a component until a condition is met

@hootlex

Suspense

<Suspense>
  <template #default>
    <UserProfile />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

@hootlex

...

@hootlex

Are Removed

Filters 

@hootlex

#nofilter

<template>
  <div>
    {{ amount | dollars }}
  </div>
</template>

Not possible in Vue 3

❌

filter

@hootlex

#nofilter

<template>
  <div>
    {{ dollars(amount) }}
  </div>
</template>

✅

method

@hootlex

No More Dilemma 🎉

@hootlex

Quite Some More Changes

@hootlex

Quite Some More Changes

  • Global mounting API change
  • Transparent Wrappers are simplified
  • Slots unification
  • Optional props declaration
  • Transition as root
  • ...

@hootlex

vueschool.io

Hints 🗺

@hootlex

Vue 3 will not break your apps ✅

@hootlex

You don't need to wait to use Vue ✅

@hootlex

Why upgrade to Vue 3?

  • Massive Performance Improvements
  • Exceptional reusability possibilities
  • New features
  • New design patterns for Scale
  • TypeScript

@hootlex

What's new in Vue 3 course on Vue School

Filip Rakowski

Alex Kyriakidis

@hootlex

https://vueschool.io/courses/whats-new-in-vue-3

What's new in Vue 3

@hootlex

Big News

🎉

🎉

Vue.js Master Class

  • published in 2017
  • Real World Vue Applications
  • 7 hours +
  • trained 4000 developers
  • All you need on Vue and the ecosystem

vue3masterclass.com

Vue 3 Master Class

@hootlex

NOV 2020

Included in Vue School subscritption

I do Videos + Workshops

vueschool.io

Alex Kyriakidis

@hootlex

Thank You