@vueschool_io

vueschool.io

Vue 2

New Features and Migrating

3

🎤

@danielkelly_io

@danielkellyio

Alabama, USA

Daniel Kelly

Lead Instructor @ Vue School

Full Stack developer (10 years)

Husband and Father

Workshop Overview

Intro to Vue 3
Benefits of Vue 3
Improvements to Existing Features
Removed Features
New Features
- Composition API (overview)*
- Teleport
- State Driven CSS*
- Other CSS Enhancements
- Emits Declaration
- Suspense
Changes in the Ecosystem
Migration

* backported to Vue 2.7

Intro to Vue 3

👋

Pinia Experiment Begins

Nov, 2019

RFC Repo Created

Jan 14, 2019

Vue 3 Codebase Goes Public

Jan 3, 2020

Vue 3 Soft Launch
(One Piece)

Sep 18, 2020

Vue 3 New Default

Jan 20, 2022

Evan Announced Dev on Vite.js

Jan 12, 2020

📣

Vue 3 Development Announced

Feb 2018

v3

Volar

more!

Why Vue 3?

Benefits and why upgrade

Smaller and Faster

Initial render up to 55% faster
Memory usage down 54%
Updates up to 133% faster
Unused features are tree-shakeable (like transitions, nextTick, etc)

Faster === better conversions

A one-second site speed improvement can increase mobile conversions by up to 27%.

===

Write More Maintainable Code

Better logic re-use and organization with the Composition API *
Type-safety with improved TypeScript Support
(TypeScript is fast becoming the norm for large scale JavaScript apps)
Other new features and API adjustments that make code more intuitive

* backported to Vue 2.7

More Maintainable Code is Good For Everyone!

✅ Stakeholders
Faster turn around times, less back and forth

✅ Site Visitors/Customers
Less bugs, more features faster

✅ Developers

Better DX, Iterate faster, spend less time debugging

Supported by the Latest and Greatest Libraries

Some of the newest 3rd party plugins, frameworks, etc only support Vue 3
ie. FormKit, Nuxt 3, Vuetify 3, etc

Much of the Same Syntax We Already Love ❤️

Options API Still 100% Supported
Single File Components
(script, template, style)
Declarative Template Syntax

Vue 2 EOL is Dec 2023

Improvements to Existing Features

Multiple v-models (and more!)
No more reactivity caveats 🎉
Fragments
Comprehensive $attrs

Multiple v-models

// MyInput.vue
<template>
<input 
  @input="$emit('input', $event.target.value)" 
  :value="value" 
/>
</template>
<script>
export default {
  props:{
    value: String
  }
}
</script>

Support v-model on a component by emitting input and accepting a value prop

<MyInput v-model="name" />

Multiple v-models

// MyInput.vue
<template>
<input 
  @input="$emit('update:modelValue', $event.target.value)" 
  :value="modelValue" 
/>
</template>
<script>
export default {
  props:{
    modelValue: String
  }
}
</script>

Support v-model on a component by emitting update:modelValue and accepting a modelValue prop

<MyInput v-model="name" />

Multiple v-models

// MyInput.vue
<template>
<input 
  @input="$emit('update:modelValue', $event.target.value)" 
  :value="modelValue" 
/>
<input 
  @input="$emit('update:email', $event.target.value)" 
  :value="title" 
/>
  <input 
  @input="$emit('update:password', $event.target.value)" 
  :value="title" 
/>
</template>
<script>
export default {
  props:{
    modelValue: String,
    email: String,
    password: String,
  }
}
</script>

Provide argument to v-model to specify any prop/update:[prop]

<MyInput 
  v-model="name" 
  v-model:email="email"
  v-model:password="password"
/>

Multiple v-models

<MyComponent 
  :title="pageTitle" 
  @update:title="pageTitle = $event" 
/>

<!-- Shortand for Above -->
<MyComponent :title.sync="pageTitle" />

Multiple v-models replace .sync

Multiple v-models

<MyComponent 
  :title="pageTitle" 
  @update:title="pageTitle = $event" 
/>

<!-- Shortand for Above -->
<MyComponent v-model:title="pageTitle" />

Multiple v-models replace .sync

v-model anatomy

Custom v-model modifiers

<MyComponent v-model.capitalize="myText" />

Vue 3 also allows us to create custom modifiers for v-model

Custom v-model modifiers

<!-- MyComponent.vue-->
<script>
export default {
  props: {
    //...
    modelModifiers: {
      default: () => ({})
    }
  },
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
  //...
}
</script>

Check for them on the modelModifiers prop. Added modifiers will be a boolean true

<MyComponent v-model.capitalize="myText" />

Custom v-model modifiers

<!-- MyComponent.vue-->
<script>
export default {
  //... 
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

Then you can alter the emitted value based on the modifier

No More Reactivity Caveats

         Vue.set(this.frameworks, index, 'Vue')

 this.frameworks[index] = "Vue"

Setting a new array item

No More Reactivity Caveats

         Vue.set(this.framework, 'name', 'Vue')

 this.framework.name = "Vue"

Adding a new object property

No More Reactivity Caveats

         Vue.delete(this.framework, 'caveats')

 delete this.framework.caveats

Deleting an object property

No More Reactivity Caveats

Less Caveats === More Intuitive === Less Bugs

Fragments

aka. Multiple Root Elements

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

❌

If you did this...

Fragments

aka. Multiple Root Elements

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

You'd get an error like this!

Fragments

aka. Multiple Root Elements

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

And have to wrap everything with a div

(which sometimes causes styling issues)

Fragments

aka. Multiple Root Elements

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

It's no problem! 🎉

Fragments

aka. Multiple Root Elements

<template>
  <div>...</div>
  <div v-bind="$attrs">...</div>
</template>

And you can specify where to put the fall-through attributes

Comprehensive $attrs

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

Listeners separate from $attrs and if you wanted them to fall through you must remember to bind seperately

Comprehensive $attrs

//MyInput.vue

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

Listeners combined with $attrs. Defined as functions prefixed with on

<MyInput id='my-input' @close="..."/>

$attrs === {
  id: 'my-input',
  onClose(){
    ...
  }
}

Comprehensive $attrs

// MyInput.vue
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

Class and Style separate from $attrs

Given this component definition...

Comprehensive $attrs

<MyInput id="my-id" class="my-class" />

Class and Style separate from $attrs

And used like this...

<label class="my-class">
  <input type="text" id="my-id" />
</label>

Would render this HTML

Comprehensive $attrs

<MyInput id="my-id" class="my-class" />

Class and Style included with $attrs

And used like this...

<label>
  <input type="text" id="my-id" class="my-class" />
</label>

Would render this HTML

Questions?

🙋🏾‍♀️

Assignment # 1

👩‍💻👨🏽‍💻

⏰ 20 mins

❌ Removed Features

Functional Components
Filters
Keycode Modifiers
$children

Functional Components

<template functional>
  <component 
    :is="`h${props.level}`" 
    v-bind="attrs" 
    v-on="listeners"
  >
    <slot></slot>
  </component>
</template>

<script>
export default {
  props: ["level"],
};
</script>

In v2, functional components provided a more performant alternative when component state was not needed

No $ prefix

Functional Components

<template>
  <component 
    :is="`h${props.level}`" 
    v-bind="$attrs" 
  >
    <slot></slot>
  </component>
</template>

<script>
export default {
  props: ["level"],
};
</script>

In v3, the performance difference for stateful components is negligible so functional SFC's are removed

$ prefix

No functional

keyword

Functional Components

<script>
// note that h is imported from vue 
// instead of provided as an argument to the render function 
// (another diff between v2 and v3)
import { h } from "vue"; 

// functional components is a render function
const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots);
};

DynamicHeading.props = ["level"];

export default DynamicHeading;
</script>

Or you can define functional components as plain functions

Filters

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    //...
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

In v2, you could use filters to format data in the template

Custom syntax that involves:

a learning curve
and implementation costs

Filters

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    //...
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>

In v3, filters are removed. Just use a computed prop instead.

Global Filters

const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

In v3, global filters can be replaced with globally defined methods

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

KeyCode Modifiers

In Vue 2 you could use keycodes as modifiers for keyboard events


<!-- keycode 75 === 'k' -->
<input v-on:keyup.75="doThing" />

KeyCode Modifiers

In Vue 3 you use the event's key value instead



<input v-on:keyup.k="doThing" />



<input v-on:keyup.k="doThing" />

KeyCode Modifiers

For multi-word key names you'll use the kebab case



<input v-on:keyup.arrow-down="doThing" />

KeyCode Modifiers

The keys for some punctuation marks can just be included literally.

(This excludes ", ', /, =, >, and . You can check these on the event in your handler)



<input v-on:keyup.,="commaPress" />

KeyCode Modifiers

KeyboardEvent.keyCode is now deprecated in browsers and no longer recommended for use. Therefore Vue 3 removes them.



<input v-on:keyup.k="doThing" />

developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

$children

<template>
  <div>
    <my-button>Change logo</my-button>
  </div>
</template>

<script>
import MyButton from './MyButton'

export default {
  components: { MyButton },
  mounted() {
    console.log(this.$children[0]) // VueComponent (MyButton)
  }
}
</script>

In Vue 2, you could access all a components child components via $children

$children

In Vue 3, $children no longer exists. If you need access to a component via the parent you can use a template ref instead

<template>
  <div>
    <my-button ref="button">Change logo</my-button>
  </div>
</template>

<script>
import MyButton from './MyButton'

export default {
  components: { MyButton },
  mounted() {
    console.log(this.$refs.button) // VueComponent (MyButton)
  }
}
</script>

Questions?

🙋🏾‍♀️

Assignment #2&3

👩‍💻👨🏽‍💻

⏰ 15 mins

Assignment #2&3

👩‍💻👨🏽‍💻

⏰ 15 mins

Skip

10 Minute Break

☕️🙆

⏰ 10 mins

🎉 New Features

Composition API *
Teleport
State Driven CSS *
Other CSS Enhancements
Emits Declaration
Suspense

* backported to Vue 2.7

Composition API

Code Organization

Logic Reuse

Improved

TypeScript Support

Composition API

Full Workshop Dedicated to CAPI

Composition API

⚡️ Super Quick Overview

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

import { ref, computed, watch } from 'vue'

No longer passing options INTO Vue

Instead we're getting reactive functions OUT OF Vue

const loading = ref(false)
const count = ref(0)
const user = reactive({})

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

Define reactive data with

ref

reactive

const double = computed(()=> count.value * 2)
const fullname = computed(()=>({ /* ... */ }))

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

Define derived data with

computed

const increment = ()=> count.value++
function fetchUser(){ /* ... */ }

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

Define methods as

functions

Composition API

Full Workshop Dedicated to CAPI

You seem like a pretty advanced audience

Do you have any specific questions about the composition API?

Would you like to dive a little deeper into the Composition API?

(I can show you some examples in StackBlitz)

🤫

Don't tell anyone but I'll give you the content and exercises from our dedicated Composition API workshop too!

(copy and paste into chat)

Teleport

Allows us to keep markup inside a component but visually display it elsewhere in the DOM
Great for modal overlays

Teleport

Modal overlay without teleport usually relies on fixed positioning

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <slot></slot>
    <footer>
      <button @click="open = false">Close</button>
    </footer>
  </div>
</template>

<script>
  // ....
</script>

<style scoped>
.modal {
  @apply fixed;
}
</style>

Position fixed only works if an ancestor doesn't include `transform`, `perspective`, or `filter`
z-index issues

Teleport

Append markup to any arbitrary element no matter where the component lives

<template>
  <button @click="open = true">Open Modal</button>

  <Teleport to="body">
    <div v-if="open" class="modal">
      <slot></slot>
      <footer>
        <button @click="open = false">Close</button>
      </footer>
    </div>
  </Teleport>
</template>

<script>
  // ....
</script>

<style scoped>
.modal {
  @apply absolute;
}
</style>

Teleport Tips

`to` prop takes a CSS selector or an actual DOM node

<template>
   <!-- string query selector-->
  <Teleport to="body">
    <!--or actual element-->
  <Teleport :to="body">
</template>

<script>
export default {
  data() {
    return {
      body: document.querySelector("body"),
    };
  },
};
</script>

Teleport Tips

can combine <Teleport> with <Transition>

<template>
   <Teleport :to="body">
    <Transition>
      <div v-if="open" class="modal">
        //...
      </div>
    </Transition>
  </Teleport>
</template>
<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

Teleport Tips

Can have multiple teleports active at one time.

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

Teleport Tips

Can dynamically disable. Useful to conditionally display inside component

<Teleport :disabled="isMobile">
  ...
</Teleport>

Teleport Tips

The teleport `to` target must already exist in the DOM when the component using <Teleport> is mounted.

Ideally, this is an element outside the Vue app.
When targeting elements rendered by Vue, ensure it's mounted first

Questions?

🙋🏾‍♀️

Assignment #4

👩‍💻👨🏽‍💻

⏰ 25 mins

Lunch

🍔

⏰ 25 mins

Lunch Break

🍽️

⏰ 25 mins

State Driven CSS

and more!

State Driven CSS

In v2, inline styles were the only option for dynamic CSS rules

<template>
<div 
  class="swatch"
  :style="{ backgroundColor: color }"
></div>
</template>
<script>
export default{
  data(){
    return {
      color: "red"
    }
  }
}
</script>

State Driven CSS

Re-use would mean re-declaring the inline style

<template>
<div 
  class="swatch"
  :style="{ backgroundColor: color }"
></div>
  
<div 
  class="swatch"
  :style="{ backgroundColor: color }"
></div>
</template>
<script>
export default{
  data(){
    return {
      color: "red"
    }
  }
}
</script>

State Driven CSS

In v3, you can bind CSS values directly in the style block

<template>
<div>
  <div class="swatch"></div>
  <div class="swatch"></div>
</div>
</template>
<script>
export default{
  data(){
    return { color: "red" }
  }
}
</script>

<style scoped>
  .swatch{
    background-color: v-bind(color);
  }
</style>

State Driven CSS

Defines a hashed CSS custom property on the root component element

(or on each element if no root)

<template>
<div>
  <div class="swatch"></div>
  <div class="swatch"></div>
</div>
</template>
<script>
export default{
  data(){
    return { color: "red" }
  }
}
</script>

<style scoped>
  .swatch{
    background-color: v-bind(color);
  }
</style>

State Driven CSS

Can use dot notation to target nested data (must use quotes)

<template>
<div class="swatch"></div>
<div class="swatch"></div>
</template>
<script>
export default{
  data(){
    return {
      colors:{ primary: "red" }
    }
  }
}
</script>

<style scoped>
  .swatch{
    background-color: v-bind('color.primary');
  }
</style>

State Driven CSS

v-bind must the entire value

<template>
<div class="swatch"></div>
<div class="swatch"></div>
</template>
<script>
export default{
  data(){
    return {
      colors:{ primary: "red" },
      width: 100
    }
  },
  computed:{
    widthInPixels(){ return this.width + 'px'}
  }
}
</script>

<style scoped>
  .swatch{
    background-color: v-bind('color.primary');
    width: v-bind(width)px; /* ❌ This won't work */
    width: v-bind(widthInPixels);
  }
</style>

Vue Specific CSS Selectors

<style scoped>
/* Style child components */
.a :deep(.b) {}
  
/* Style slot content */
:slotted(div) {}  

/* Quickly define a global rule */
:global(.red) {}
</style>

<style>
/* Same as :global in scoped tag above */
.red{}
</style>

Questions?

🙋🏾‍♀️

Assignment #5

👩‍💻👨🏽‍💻

⏰ 15 mins

Emits Option

Declare Component Events

Emits Option

Emits scattered throughout component

<!-- DataSender.vue -->
<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('sending-start')
      
      // send data to API

      this.$emit('sending-complete')
    }
  }
}
</script>

Emits Option

Declare all events with emits option

<!-- DataSender.vue -->
<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
export default {
  emits:['sending-start', 'sending-complete'],
  methods: {
    sendData() {
      this.$emit('sending-start')
      
      // send data to API

      this.$emit('sending-complete')
    }
  }
}
</script>

Emits Option

Benefits of Emit Option

It documents component events in a single place

<script>
export default {
  emits:['sending-start', 'sending-complete'],
  //...
}
</script>

Important for devs and tooling

Emits Option

Benefits of Emit Option

When using TypeScript events appear in intellisense results

Emits Option

Benefits of Emit Option

Makes the removal of $listeners possible
Why? because listeners for declared events are removed from the `$attrs`
This also makes means no more .native

<MyButton @click.native="doThing" />

Emits Option

Benefits of Emit Option

Documents component events in a single place
When using TypeScript events appear in intellisense results
Listeners for declared events are removed from the `$attrs`
Can validate emit payload

Emits Option

Validate event payload

<!-- DataSender.vue -->
<!--...-->
<script>
export default {
  // define as object to use validation
  emits:{
    // null is no validation
    'sending-start': null,
    
    // or provide function to validate
    // return truthy for valid, falsy for invalid
    'sending-complete'(payload){
      return !!(typeof payload.duration === 'number' && payload.response);
    }
  },
  methods: {
    sendData() {
      this.$emit('sending-start')
      
      // send data to API

      this.$emit('sending-complete', {
        duration: 2,
        // response: 'how are you'
      })
    }
  }
}
</script>

Emits Option

Validate event payload with TypeScript

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  emits: {
    addBook(payload: { bookName: string }) {
      // perform runtime validation
      return payload.bookName.length > 0
    }
  },
  methods: {
    onSubmit() {
      this.$emit('addBook', {
        bookName: 123 // Type error!
      })

      this.$emit('non-declared-event') // Type error!
    }
  }
})
</script>

Questions?

🙋🏾‍♀️

Assignment #6

👩‍💻👨🏽‍💻

⏰ 20 mins

Assignment #6

👩‍💻👨🏽‍💻

⏰ 20 mins

Skip

Suspense

What is Suspense?

Admittedly a little difficult to understand if you've never heard of it before

Suspense

Orchestrate async dependencies

Without Suspense

With Suspense

(with more control at component level)

AKA - eliminate popcorn loading

Suspense

In Vue 2 you'd have local loading data in
the component

<!-- PostsList.vue -->
<script>
export default{
  data(){
    return {
      loading: true,
      posts: null
    }
  },
  async created(){
    const res = await fetch("https://myapi.com/posts")
    this.posts = await res.json()
    this.loading = false
  }
}
</script>
<template>
<div>
  <AppSpinner v-if="loading"/>
  <div v-else>...</div>
</div>
</template>

Suspense

Somewhere higher in the higharchy would use the component and others like it

<!-- ParentComponent.vue -->
<template>
<div>
  <PostsList />
  <UsersList />
  <CommentsList />
</div>
</template>

Suspense

Let's take the same component and

modify it for Vue 3

<!-- PostsList.vue -->
<script>
export default{
  data(){
    return {
      loading: true,
      posts: null
    }
  },
  async created(){
    const res = await fetch("https://myapi.com/posts")
    this.posts = await res.json()
    this.loading = false
  }
}
</script>
<template>
<div>
  <AppSpinner v-if="loading"/>
  <div v-else>...</div>
</div>
</template>

Suspense

In Vue 3 you can get rid of all that loading state in the component

<!-- PostsList.vue -->
<script>
export default{
  data(){
    return {
      posts: null
    }
  },
  async created(){
    const res = await fetch("https://myapi.com/posts")
    this.posts = await res.json()
  }
}
</script>
<template>
<div>
  <div>...</div>
</div>
</template>

Suspense

Then return an async setup function
instead

<!-- PostsList.vue -->
<script>
export default{
  async setup(){
    const res = await fetch("https://myapi.com/posts")
    const posts = await res.json()
    return { posts }
  },
}
</script>
<template>
<div>
  <div>...</div>
</div>
</template>

Don't worry too much about how setup works right now

Suspense

With script setup you can use a top level await

<!-- PostsList.vue -->
<script setup>
const res = await fetch("https://myapi.com/posts")
const posts = await res.json()
</script>
<template>
<div>
  <div>...</div>
</div>
</template>

Don't worry too much about how setup works right now

Suspense

Then in the parent you use suspense to show a

single loader once all promises have resolved

<!-- ParentComponent.vue -->
<template>
<div>
  <Suspense>
    <!-- Put all the async components 
         inside the default slot -->
    <template #default>
      <PostsList />
      <UsersList />
      <CommentsList />
    </template>
    
    <!-- And your loader 
         in the fallback slot -->
    <template #fallback>
      <AppSpinner/>
    </template>
  </Suspense>
</div>
</template>

Suspense

Also works with asyncComponents

(different chunk from main js bundle)

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import('./components/AdminPageComponent.vue')
    )
  }
}
</script>

<template>
  <Suspense>
    <template #default> <AdminPage /> </template>
    <template #fallback> <AppSpinner/> </template>
  </Suspense>
</template>

Suspense

Total control by mixing async setup and local loading state

<!-- ParentComponent.vue -->
<template>
<div>
  <Suspense>

    <template #default>
      <!-- has async setup -->
      <PostsList /> 
      <!-- has async setup -->
      <UsersList /> 
      <!-- handles own loading state -->
      <CommentsList /> 
    </template>
    
    <template #fallback>
      <AppSpinner/>
    </template>
  </Suspense>
</div>
</template>

Suspense

Does it do error handling?

Suspense Recap

Eliminates "Popcorn loading"
Less boilerplate in components (no loading state)
Handle loading state at top level
Can still handle loading state in component if desired for total control

Suspense Word of Warning

Suspense is technically an experimental feature

vuejs.org/guide/built-ins/suspense.html

Suspense Word of Warning

But Nuxt 3 uses in production... so I wouldn't

worry about Vue.js core making breaking changes

nuxt.com/docs/api/composables/use-async-data#params

Questions?

🙋🏾‍♀️

Assignment #7

👩‍💻👨🏽‍💻

⏰ 20 mins

5 Minute Break

☕️🙆

⏰ 5 mins

Migrate to Vue 3

Why Migrate to Vue 3

All the great new features we've already talked about!
(Many of these are back-ported to 2.7^)
Get continued support and updates (security patches, future new features, etc)

What if I can't migrate?

Never Ending Vue 2 Support from HeroDevs

How do I Migrate to V3?

https://v3-migration.vuejs.org/

How do I Migrate to V3?

The Official Migration guide provides:

A list of breaking changes complete with examples of prior behavior, new behavior, and a strategy for migrating

Breaking Changes

Example of Filter

Notable Breaking Changes

Besides the breaking changes already seen throughout the workshop, there are a few more worthy of noting

🔖

Notable Breaking Changes

Async compnent syntax changed

<!-- Vue 2 -->
<script>
export default{
  components:{
    MyAsyncComponent: () => import('./MyAsyncComponent.vue')
  }
}
</script>

<!-- Vue 3 -->
<script>
import {defineAsyncComponent} from "vue"
export default{
  components:{
    MyAsyncComponent: defineAsyncComponent(
      () => import('./MyAsyncComponent.vue')
    )
  }
}
</script>

Watch on Arrays

<script>
export default{
  data(){
    return {
      food: ['Hamburger', 'Hotdog', 'Spaghetti', 'Taco']
    }
  },
  watch:{
    // Vue 2 - will fire when array replaced, order changed, item added, etc
    // Vue 3 - will only fire when array is replaced
    food(){
      console.log('food changed')
    },
    
    // Vue 3 - must provide for handler to fire on order changed, item added, etc
    food:{
      handler(){
        console.log('food changed')
      },
      deep: true
    }
  }
}
</script>

Notable Breaking Changes

Global API Treeshaking

<!-- Vue 2 -->
<script>
import Vue from 'vue'

Vue.nextTick(() => {
  // something DOM-related
})
</script>

<!-- Vue 3 -->
<script>
import { nextTick } from 'vue'

nextTick(() => {
  // something DOM-related
})
</script>

Notable Breaking Changes

Global API Treeshaking

<!-- Vue 2 -->
<script>
import Vue from 'vue'

Vue.nextTick(() => {
  // something DOM-related
})
</script>

<!-- Vue 3 -->
<script>
import { nextTick } from 'vue'

nextTick(() => {
  // something DOM-related
})
</script>

Notable Breaking Changes

Also Vue.version

<!-- Vue 2 -->
<script>
import Vue from 'vue'
console.log(Vue.version)
</script>

<!-- Vue 3 -->
<script>
import { version } from 'vue'
console.log(version)
</script>

Custom Directives Hooks

// Vue 2
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

// Vue 3
const app = Vue.createApp({})

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})

Notable Breaking Changes

custom directive hooks mirrors component lifecycle hooks

Custom Directives Hooks

Notable Breaking Changes

created - new! This is called before the element's attributes or event listeners are applied.
bind → beforeMount
inserted → mounted
beforeUpdate: new! This is called before the element itself is updated, much like the component lifecycle hooks.
update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
componentUpdated → updated
beforeUnmount: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted.
unbind -> unmounted

Notable Breaking Changes

All breaking changes can be found at:

https://v3-migration.vuejs.org/breaking-changes/

How do I Migrate to V3?

A list of breaking changes complete with examples of prior behavior, new behavior, and a strategy for migrating

A list of New Framework-level Recommendations

The Official Migration guide provides:

How do I Migrate to V3?

Vue - Official

New Framework Level Recomendations

Vue Core v2 ➡ v3
✅ Yes, this is the priority

🟥

🟨

🟥

Options ➡ Composition
➡️ Recommend using CAPI going forward as needed

Vue CLI ➡ Vite
🏁 Sooner or later

Vuex ➡ Pinia
🏁 Sooner or later

Difficulty

🟩 Easy

🟨 Medium

🟥 Hard

Router, Devtools, test-utils

🟩

Vetur ➡ Volar
✅ Yes for VS Code, super easy

Resource for Other Migrations

Options ➡ Composition
- Fairly 1-to-1 Change
- Vue.js 3 Master Class
Vue CLI ➡ Vite
- Blog Post
- vue-cli-plugin-vite
Vuex ➡ Pinia
- Pinia Docs Migration Guide
- Blog Post

How do I Migrate to V3?

A list of breaking changes complete with examples of prior behavior, new behavior, and a strategy for migrating
A list of New Framework-level Recommendations

Migration build

The Official Migration guide provides:

What is the Migration Build?

@vue/compat
a build of Vue 3 that supports Vue 2 API's (mostly)
Usage of features that have changed or been deprecated in Vue 3 will emit runtime warnings.
Used for migrating from Vue 2 to Vue 3

Install Vue 3 and Migration Build

npm install vue@3.2.45
npm install @vue/compat

Step

Alias vue to @vue/compat

Step

// vue.config.js (vue-cli)
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
  }
}

Vue Docs also contains example configs for:

Plain Webpack
Vite

Vue CLI

Handle compile time errors

Step

Errors will display in the terminal when running `npm run serve`
Is recommended to handle all compile time errors first

Handle compile time errors

Step

Errors will display in the terminal when running `npm run serve`
Is recommended to handle all compile time errors first

Set compiler to Vue 3 mode

Step

module.exports = {
  //...
  compilerOptions: {
    compatConfig: {
      MODE: 2,
      MODE: 3
    },
  },
}

Means the Vue compiler should expect all compiler level code to be written as per Vue 3 specification

Set compiler to Vue 3 mode

Step

module.exports = {
  //...
  compilerOptions: {
    compatConfig: {
      MODE: 2,
      MODE: 3
    },
  },
}

Means the Vue compiler should expect all compiler level code to be written as per Vue 3 specification

Update dependencies like Vue Router and Vuex

Step

Official dependencies will have their own migration guides. Others may or may not. (This is where things can get a little dicey, but the ecosystem has definitely progressed)

Run app and go through console warnings

Step

Deprecations will show in console
Can filter warnings in console to concentrate on one type of change at a time

IDs for warnings found here:

https://v3-migration.vuejs.org/migration-build.html#feature-reference

Explanation

Link to docs

Run app and go through console warnings

Step

Once you've handled all instances of a feature ID you can turn compatibility for it off
All your tests involving that feature should now pass and be 100% compatible with Vue 3

// main.js
import { configureCompat } from 'vue'

// disable compat for certain features
configureCompat({
  COMPONENT_V_MODEL: false,
  FEATURE_ID_B: false
})

Run app and go through console warnings

Step

you could also do the same config at the component level
Use case for this? 🤷 Maybe you could migrate one component at a time as opposed to one feature ID at a time

export default {
  compatConfig: {
     COMPONENT_V_MODEL: false,
     FEATURE_ID_B: false
  }
  // ...
}

Run app and go through console warnings

Step

Can deploy to production with partial migration (warnings still in console)
Minimal performance hit
HOWEVER, I recommend a git branch for complete migration and deploy all together

feature/vue-3-migration

and maybe a commit per feature ID?

Run app and go through console warnings

Step

when all console warnings are gone you'll end up with a compatConfig that's disabled all applicable feature ID's
but you'll have one feature ID left to handle: TRANSITION_CLASSES

configureCompat({
  COMPONENT_V_MODEL: false,
  GLOBAL_MOUNT_CONTAINER: false,
  GLOBAL_MOUNT: false,
  GLOBAL_SET: false,
  //... 
})

Update transition class names (no console warning)

Step

You can do a project-wide search in IDE for .*-enter and .*-leave CSS class names
Replace with
Replace with

.v-enter

.v-enter-from

.v-leave

.v-leave-from

Update transition class names (no console warning)

Step

add TRANSITION_CLASSES to compatConfig

configureCompat({
  // ...
  TRANSITION_CLASSES: false
})

Update transition class names (no console warning)

Step

once all the IDs have had compatibility turned off that's the equivalent of changing the compatConfig.mode to 3

configureCompat({
   MODE: 3
})

Switch to Vue 3 proper

Step

uninstall @vue/compat
remove any compat config
remove alias of vue to @vue/compat

// package.json
"@vue/compat": "^3.1.0",



// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set("vue", "@vue/compat");

    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 3,
            },
          },
        };
      });
  },
};


import { 
  createApp, 
  configureCompat 
} from "vue";

import App from "./App.vue";

configureCompat({
  COMPONENT_V_MODEL: false,
  GLOBAL_MOUNT_CONTAINER: false,
  GLOBAL_MOUNT: false,
  GLOBAL_SET: false,
  //... 
})