162Thursday, October 24, 2019Vue-Apollo v3.0 has been released and now becomes a part of the official libraries;
Hello,
Guillaume seems to have been very productive this week. Two new versions of his libraries have been released: Vue-Apollo v3.0 is here and has a new home – the library becomes part of the Vue core libraries, which means it’s now located under the vuejs org. Also, vue-cli-plugin-ssr is now version 0.6.0!
As we are getting closer to the Vue 3.0 release, we have several more articles on Composition API – one of the biggest new additions to the framework.
Stories
Release v0.6.0 · Akryum/vue-cli-plugin-ssr · GitHub
✨ Simple SSR plugin for Vue CLI.
Thought on Vue 3 Composition API - `reactive()` considered harmful
The new Composition API introduces two ways to declare reactive data, either using reactive or ref. Both of those have their own quirks and in this article Jason Yu goes through how both of those work and why he thinks ref is a better way to work with reactive data.
Vue.js Composition API Starter Guide with examples
In this video tutorial Erik Hanchett first builds an app using the current, options-based API and then refactors it to show how it would look like when built with Composition API. Good watch!
Build a movie search app using the Vue Composition API
Here’s another tutorial on how you will be able to use the Composition API. Here, Gábor Soós builds a simple movie search app.
VueJS London 2019
Missed Vue.js London this year like I did? Or maybe you’ve been there and just want to remind yourself of all the great content presented there? Check out this summary article by Elke Heymans.
Popup Overlays with Vue Router and Portal Vue
Most apps introduce modals at some point. It’s usually controlled by the internal state of the parent component or from Vuex. However, what if we want to persist the fact that the modal is open even when the page is reloaded? In that case, we got to tie it to the URL and thus to the vue-router. Read this article to learn how.
Vue Camera Gestures - Add AI powered gesture controls to your app in 1 line of HTML
What if you could pop a unicorn in your app whenever the user had a super bored face? Or play a loud irritating sound when they close their eyes? Well, you probably shouldn’t, but this article might help you if you still wanna do it. Though it starts with something simpler – hand gestures. Great read! Powered by Tensorflow!
How to make provide/inject reactive
Although you probably shouldn’t abuse provide/inject in your applications, sometimes it’s the perfect tool to solve a specific problem. However, what you might notice is that usually injected properties don’t really stay reactive. And that’s how it works by design. But there is a trick you can use to make those properties reactive. Or you can use Thorsten’s vue-reactive-provide plugin.
The most modern Pie Chart component using CSS Conic Gradient and Vue.js
Conic Gradient is a pretty new addition to CSS and among other things, it allows us to build a pie chart. This is made especially easy with Vue’s dynamic style binding.
Libraries
GitHub - creotip/vue-particles
Vue.js component for particles backgrounds ✨
Vue Camera Gestures
Let users control your Vue app using AI, their camera, and gestures of their choice in just 1 line of HTML!
GitHub - shentao/vue-global-events
⌨️ Register global events as a component
GitHub - expangine/expangine-vue
A Vue component library for expangine, a visual development framework.