What I Learned from Teaching Vue

Hey everybody! Daniel Kelly here. If you’re reading this article then you probably know me as the teacher of many Vue School courses. I’ve been doing this for almost 2 years now and love the chance to share knowledge and by extension of that, opportunities to students like you!

Besides the joy of sharing, teaching also brings the opportunity to learn new things myself. Let me take this opportunity to share a few of those things I’ve learned.

TypeScript with Vue.js

Before joining Vue School, I had limited experience with TypeScript. After prepping and teaching both the courses TypeScript Fundamentals and TypeScript with Vue.js 3, I’ve gained a deep appreciation for this strongly typed superset of JavaScript.

With TypeScript you can:

• Model data with interfaces so that you’re always aware of the shape of things
• Type Vue.js component props and events, so that it’s easy to interact with components without ever having to look at the source code (or even the docs!)
• Type data, computed props, methods, etc within both the Options API and the Composition API
• Succinctly describe function and component API’s within documentation

Vue and the Composition API

At previous jobs, I worked primarily within the Vue.js Options API. This wasn’t necessarily a strategic choice, mostly it was all that was available at the time. Since joining Vue School and watching the ecosystem evolve, I’ve now fully converted to Composition API all the time.

In my experience the Composition API has come with a number of practical advantages:

• CAPI along with script setup is easy to use and understand
• Abstracting state and functionality into re-usable composables is fairly simple if you start with the Composition API in your components
• Organizing logic is possible with the Composition API
• I can easily get off the shelf functionality with 3rd party composable libraries like VueUse (something I include in a majority of projects nowadays)

Vue Plugins

Also, while I’ve written a handful of plugins to use within the same app they’re defined in, I’ve never packaged a plugin for distribution on NPM. That is, until we produced the course Custom Vue.js 3 Plugins.

Besides learning the relevant npm commands like npm link and npm publish, I also got a pretty good grasp on how to configure the package via the package.json file. Plus, I really enjoyed learning how to make the plugin type-safe by typing the plugin options as well as generating types for included components and global custom properties.

The Best Lesson of All

Finally, perhaps the best lesson of all I’ve learned while at Vue School, has nothing to do with code at all. What lesson is that? That people are what drive this amazing community! Sure the framework itself is great, but it doesn’t compare to helpful peers, genuine leaders, strong and thankful students, and everyone else I’ve met on this journey!

My wish for all of you this season, is that you too learn some exciting new things and also that you make some exciting new relationships along the way!