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.
⚡ RESOURCES ⚡
Source Code - https://github.com/codingwithjustin/vue-typescript-login
Vue Typescript Docs - https://v3.vuejs.org/guide/typescript-support.html
Vue Composition API - https://v3.vuejs.org/guide/composition-api-introduction.html
Basics of Composition API - https://www.youtube.com/watch?v=p4iOYO_St_Y
⭐ 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
#typescript #vue #javascript
