The Vue 3 Composition API has open new possibilities for accessing the full power of the Vue Router. Today we will be looking at using Vue Router with the composition API, to create a cat facts webpage with full typescript support. By the end of this video, you will hopefully have a full understanding of how to successfully use the newly added useRoute and useRouter composition functions. We’ll also look at some changes between Vue 2 and Vue 3 and some more advanced features like lazyloaded routes, dynamic segments, navigation guards, and adding a 404 error page.

⚡ RESOURCES ⚡
Github - https://github.com/jsbroks/vue-cat-facts
Vue 3 - https://v3.vuejs.org/

⭐ TIMESTAMPS ⭐

• 0:00 - Intro
• 0:53 - Project Setup
• 1:12 - Vue Router Object
• 1:43 - Creating a Basic Route
• 2:13 - Fact Components
• 3:00 - Dynamic Routes
• 3:20 - Navigation Guard
• 3:35 - Programmatic routing
• 4:14 - Router Link component
• 4:30 - Nav Bar
• 4:45 - 404 Error Handling
• 5:04 - Conclusion

#vue #typescript #javascript