We’re back with another edition of This Month in Vue. This time, Adam, Ben and I were able to all record in the same room as we’re lucky to have Ben visiting us in Orlando. On top of that, we’re excited to share with you what has been going on in the Vue.js community in October.
Ben and Adam will be at VueConf Toronto on November 10-12. If you’re planning on heading to this one but don’t have a ticket yet, you can use our code VUEMASTERY (in all caps) to get $50 off a ticket.
Vue 3, Start Using it Today
Late last week, I published an article covering the different ways you can start using the features of Vue 3 today. In the article, you’ll learn how to start using the Composition API by using the Plugin inside your Vue 2 applications as well as how to get the Vue 3 pre-alpha code so you can start playing with the new source code.
Building Chrome Extensions
Do you ever think about learning how to build Chrome extensions but decide that the complication seems to outweigh your available time? Well luckily, it may be simpler than you think since you can use Vue.js when building Chrome extensions. This article by Simon Nørlund Eldevig gives a great overview of the bare essentials of Chrome Extensions and recommends a great boilerplate for creating Chrome extensions that utilize the Vue CLI tool.
Unit Testing in Vue, parts 2-3
In last month’s episode, we featured Vue Mastery’s new blog and our first post by Dan Vega on Unit Testing Vue components, which is part 1 of the series. Since then we’ve published part 2, which walks through writing your first test using Jest and Vue Test Utils, and part 3, which explores testing components that are a bit more complex.
Thought on Vue 3 Composition API - reactive() considered harmful
When learning the Vue 3 Composition API, you might become familiar with the two ways that we can create reactive objects, ref and reactive. Last week, Jason Yu went over the reasons he sees using ref as the better choice of the two. This is definitely a great read if you have been learning Vue 3 or are considering it.
Vue.js with CSS Conic Gradient
Vue.js’ reactivity system is so simple to use, it makes for a great tool to create beautiful infographs. In this article, Alex from Vue Dose walks you through a clever technique for creating an on-the-go pie chart by using only CSS and a bit of Vue.js to manage the data.
Dependency Injection in Vue.js with Functional Component Factories
A major benefit of components is that they can keep our apps modularized. But things become less flexible when components are coupled tightly with their dependencies. Markus Oberlehner to the rescue! He shared a pretty cool way to inject dependencies, using functional component factories (a stateless component that is simply responsible for taking a component and injecting it with the dependency it needs).
Vue CLI v4.0.0 Realeased
Vue CLI v4.0.0 was released two weeks ago. Since then, there have been a few bug fixes bringing it up to V4.0.5. This major version is focused on necessary version upgrades of underlying tools, better default setups, and other fine-tunings required for long-term maintenance. This new version comes with improved Nightwatch and Jest testing library support, as well as PWA support for creating progressive web apps.
15 Must Have Vue Directives
The default Vue directives like
v-if that ship with Vue are great, but do you ever want to use more custom directives? Nada Rifki has supplied us with a fantastic round-up of must-have Vue directives that Vue developers have already created, so you don’t have to search for them.
Vue Camera Gestures
It’s always interesting to see the new and intuitive ways that you can interact with an interface. Especially when someone combines Vue with machine learning to allow for gesture-based controls. Daniel Elkington created a new library called Vue Camera Gestures, which uses some AI with TensorFlow under the hood. Essentially, you can tell a Vue app what you want it to do by waving your hand around. A great innovation from an accessibility perspective.
We’d love to hear from you
If you found this post & podcast useful, please let us know by following / tweeting @vuemastery.