Vue 3 Typescript Tutorial - Basic user login flow with Typescript and Vue 3

Learn the basics of how to use Vue and Typescript to create an authentication sign form. Today we will be creating a basic user sign-in flow with typescript and Vue 3. We won't be building a backend for this example but we will create some async function to show you how you would call a backend API in your application.

We'll first create a new Vue project with typescript support using the Vue CLI then we'll walk through an introduction to typescript with Vue. This tutorial will assume you already have an understanding of the composition API as we will be using it to create components. If not you should check out some of my other videos where I go into more detail about this topic. Since this application is small we will be using the composition API for creating a global state instead of Vuex. I'll also show you how you can set up VSCode to get better typescript inference within the template of a single Vue component.

✨ SOCIAL ✨

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Typescript + Vue
0:22 - Outline
1:30 - Creating Project / Vue CLI
2:00 - Vue Components with Typescript
3:15 - Enabling Template Typescript Inferencing
4:28 - Fake auth endpoints
5:54 - Basic Counter Component
7:45 - User Components
9:53 - Bring components together
10:36 - Conclusion

[devops-sushi]

Brilliant - just the right amount of information. Nothing more, nothing less! 💯

[ElmachitoSilbateador]

I have another doubt, on min 5:33, how does TS know that on line 12, the result of "await request.json() is gonna be of type User? magic?

[JH-lckt]

why did you create your own store, but not use an already existing some? vuex/pinia?

[ElmachitoSilbateador]

Really nice video

On min 5:37, can you explain a little bit how does line 2 work?

[joaosousa]

a have an error here:import userStore from '@/store/user' io dont see where you exported it

[antoniapettersson]

do you have a video of this, but step by step ?

[overnightmares]

that "inc" action mutating the store? shouldn't it be a mutation instead?

[chrisperez]

So u are not using vuex at all? I like the symplicity. But I'm not sure if I will miss the dev tools vuex stuff for debugging. That's a really plus for using vuex

[Gummiball]

Nice tutorial. Sometimes too fast and "jumpy".