Jennifer Bland header image
≡ Menu

How to Greatly Simplify Your Vuex Store

As the size of your Vue application grows, the number of actions and mutations in your Vuex store grows too. Let me show you how to reduce this to something more manageable.

What is Vuex

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

How we are using Vuex

We are using Vuex to share state between all the applications in our Factory Core Framework application. Since the framework is a bundle of applications, we currently have nine Vuex stores. Each store has its own state, actions, and mutations.

We are using actions in the store to do API calls to the backend. Once the data is returned we use mutations to store it in state. This allows any component to access that data.

As you can imagine, our stores can have a very large number of actions to handle these API calls. Here is an example of all the actions in one of our Vuex stores.

[continue reading…]

How to Reduce Your Vue.JS Bundle Size With Webpack

I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Due to the bundling of such a large number of applications our Vue build for production resulted in multiple warnings about excess size.

Size of our build initially

When we do a build we get the following 2 error messages:

Vue recommends that bundles not exceed a size of 244 KiB. We have 14 assets alone where each exceeds this size. In addition, we have four entry points that are also above the recommended size. Here is what I did to reduce the size of our build in half.

[continue reading…]

How to Add Charts and Graphs to a Vue Application

The heart of every application is displaying data to users. Sometimes it is very challenging to display that data using text. Charts and graphs are a great way to provide a visual representation of that data. In this article, I will show you how easy it is to create visually appealing charts in your Vue.js application.

Getting Started

I will be using the Vue CLI to scaffold out a starter application quickly. I will use both echarts and vue-echarts to add charts to our starter application. So let’s get started.

Install the Vue CLI with this command:

npm install @vue/cli

Next, we will use the Vue CLI to scaffold out a Vue application that we will use. We will create the application using this command:

[continue reading…]

Creating Custom Directives in Vue.js

Directives are special attributes with the v- prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Vue.js provides a wide range of directives for you to use. You have probably already used the v-if, v-repeat, v-model and v-show directives.

In this article, I am going to explain the parts of a directive and what is available to use. Then I will show you how to create a wide range of custom directives so that you can apply your programming needs directly to DOM elements. So let’s get started discussing what is included with a directive.

Name of Directive

The most basic custom directive only has a name. It does not accept any arguments nor does it have any modifiers. Without passing a value, this would not be very flexible, but you could still have some piece of functionality of the DOM element.

[continue reading…]

How to implement horizontal scrolling using Flexbox

If you create websites, chances are you have been asked to create a horizontal scrolling component. It is extremely easy to implement this using just a few lines of Flexbox. Let me show you how.

Project Layout

We need to create a container that will contain all the images that we want to scroll. Here is the code:

[continue reading…]