Vue 3 Typescript Introduction with Tips and Migration Guide From VueJS 2

Built with Typescript, Vue 3 and the new Composition API allow seamless integration of Typescript code into your Vue 3 IDE or application. However, migrating your application to Typescript can be challenging and may break your code if you are not careful. This getting started video tutorial covers creating a new Typescript codebase with Vue CLI, type safety in Vue components, and how to fix common issues.

Vue 3 shim in Vue Router Playground:

Timestamps:

0:00 Open

0:20 Introduction

1:24 Creating an Application with Vue and Typescript

2:20 Getting started with Vue JS 2 to Vue 3 Migration

2:49 Typescript Differences Between Vue 2 and Vue 3

3:54 Upgrading the Shim

6:33 New Typescript Component syntax for VueJS 3

8:45 Testing the App

Vue Enterprise Support:

Digital Transformation With Amazon Web Services:

Product Kickstart - Free E-book:

Grgur on Social Media:

Modus Create is a disruptive consulting firm that helps companies transform for success in the digital future through a unique collaborative engagement model that focuses on strategy, product design/build, user experience, company culture, and process change.

#Vue #Vue3 #Typescript #VueJS #VueCompositionAPI

[vintprox]

Oh, thanks for pointing out the recommended shim!
But for everybody coming along here I'd like to recommend Composition API instead of `defineComponent` function shenanigans 😉

[yeikiu]

Loved every aspect of new beta while developing instab.io !

Many thanks for your good videos, learning lots!

[kalyszhek]

Hi! Very understandable. Can you help me. How to create layout in Vue3 with Typescript?
p.s. Thanks a lot.

[HosseinOjvar]

Hello, I have a small BIG problem ;;;)))

When I define my components with lang="ts", in browser I faced with this error:

Uncaught ReferenceError: can't access lexical declaration '__WEBPACK_DEFAULT_EXPORT__' before initialization

How can I resovle that?

[aitohideki]

Great post @Grgur.
Can't wait for your next Vue v3 SSR tutorial with @vue/server-renderer
Is there any vue config option for SSR or something.

Looking forward to see you in your next video.

[basilikum]

"vue add vue-next" is not longer needed
vue cli now supports vue 3 by default

[rajikkali]

What are the advantages to using the class-style-syntax?

[chiubaca]

What is the shim file exactly ? I've never really understood the purpose of it

[fristysOriginal]

This defineComponent method is not the same as a class component (good luck getting proper Typescript hinting inside of the methods in this random anonymous object you pass to defineComponent). It's literally the same as the old export default { }. That sucks.

[dbarjs]

What keyboard are you using? (I like the sound of this)

Thanks for the video!

[MikeMitterer]

String instead of string??? You say "this is it" - you don't show how something is migrated. You are completely rewriting the component. Not very exiting... Type safety??? where is it? Please show how type safe autocompletion works

[aram]

Stunning that a fresh upgrade to v3 generates completely invalid code

[nnbr]

As for vue-cli 4.5.0 you can choose vue version on project creation, so you don't need to use the plugin anymore.

[rodrigobertoa]

It looks a Lot like the old js-only way of writing components.

[aram]

Get into vuex, try to type the states/modules properly and you'll run into a can of worms

[assoftTR]

Thank you... but; Try being yourself a little bit.