← Go back

140Tuesday, May 7, 2019
Vuex v3.1.1 released. Vue-CLI v4.0-alpha is here; Managing state with Apollo and more!

Hello!

Whoa, there is so much content this week we had a really hard time picking up the articles (some of them might show up next week).

First of all, Vuex got a new release which will definitely make the NativeScript devs happy, since now it supports debugging with the remote Vue Devtools. 🎉

The Vue-CLI v4.0.0-alpha has also been released with several meaningful changes like bumping the versions on webpack-chain, core-js, ESLint, and workbox in the PWA plugin. Take it for a spin and let us know of any issues.

Also, Natalia has written an amazing article on managing state when using Apollo and is probably a must read those of you considering using Apollo in your project.

Cheers,

Damian Dulisz


Stories

Release v3.1.1 · vuejs/vuex · GitHub

A brand new release of Vuex that comes with support for debugging NativeScript apps with the standalone Vue Devtools as well as a new ES module build.

Release v4.0.0-alpha.0 · vuejs/vue-cli · GitHub

The first alpha release of the incoming Vue-CLI 4.0 is here with a number of new features and breaking changes. Take a look, try it out and leave your feedback.

v-tooltip 3.0 alpha | Guillaume Chau on Patreon

Guillaume has just released an alpha version of probably the most popular tooltip library for Vue. The next, 3.0 version will become even more powerful, now that you can use it as a separate component. It does look strangely familiar. 🧐 😂

VoV 059: Trash Brain, Clean Vue with Tessa

Here’s a great interview with Tessa, the organizer of the NYC Vue meetup and an amazing speaker that you might have seen this year at VueConf.us. You can watch her talk here.

Apollo state management in Vue application

I’ve recently seen a presentation on how to replace Vuex with Vue-Apollo and this article by Natalia Tepluhina goes into details on how to work with Apollo local cache and generally state management. Definitely something to read if you decide to use GraphQL with Apollo in your project.

Vue + Tailwind + PurgeCSS — The right way

TailwindCSS is probably my favorite CSS tool right now, like literally, I can’t imagine working with anything else. However, if left unchecked (not modifying the config file) it might result in a pretty large CSS bundle. Here’s a nice article that shows how to cut the size of your CSS files with PurgeCSS. But you should also take a look at the official docs regarding the file size.

Structuring Vuex Modules for Relationships, Speed and Flexibility

So you probably already know that you should store shared data in Vuex, but how to do it in a way that actually makes it easier to work with the data? Greg Bate shares some of his ideas on how to structure Vuex to make it extremely easy to find and access specific records. Interesting read.

Handling Errors in Vue.js

By default all errors in your Vue.js code are being thrown as they are with some predefined messages that should help you debug your application. But did you know that you can additionally control the error handling within specific components? Read this to learn more on the topic.

Vue.js: Using Vue Router Page Transitions

Vue transition component is a pretty useful tool to animate elements on your page. But you can also use them on your router views. But if you don’t really have the time to figure out how to make the best out of it, Orlandster has created the vue-page-transitions library which includes several predefined page transitions ready to be used.

‘Go Beyond Static’ with Vue Router

Netlify is an amazing service that lets you deploy your Vue apps in mere minutes. However, it can be a little tricky to set it up with the Vue-Router’s history mode (the one without the # sign in your URL). If you ever struggled with that, here’s a quick tutorial on how to make it work quickly.

Quick Intro to Vuex ORM

If you come from a backend background you probably heard of database ORMs. Since Vuex can be somewhat treated as a local database, no wonder there is a Vuex-ORM library. By using it, you’re moving away from the default, string-based API in favor of models that represent the data and come with their own API.

The IoC Container Pattern with Vue.js

Provide/inject is a powerful Vue API that is usually recommended only to library authors. However, it can also be used inside your app if done properly. It allows you to provide some context for your child components by exposing some methods or data for those child components to use. This can be very useful for cases where you don’t want to pollute the props with information that would have to be passed down the component tree several times.


Libraries

GitHub - Akryum/vue-observe-visibility

https://github.com/Akryum/vue-observe-visibility

Detect when an element is becoming visible or hidden on the page.

GitHub - vuex-orm/vuex-orm

https://github.com/vuex-orm/vuex-orm

The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.