In this article I will show a quick and easy way to create a Pinterest style layout grid to showcase images. This grid will be responsive meaning that it will automatically resize as the browser window increases or decreases in size.This will display images regardless of their individual height and does not level out all images to have them start on the same row. Instead when the image in a column ends then the next image starts leaving you with a picture board layout where all images are not aligned equally. So let’s get started.
What we will be creating
This is the flowing Pinterest style layout we will be creating.
Most applications will access data from an API. To access that API you will need to have an API key and the URL to access the API. You should not be pushing your API keys to you repo because that makes them available to everyone. The solution is to store your API keys in environment variables. So how do you access environment variables in a Vue.js application? Let me show you how.
The best way to start is to have a project that was created using the Vue-CLI. If you used this then it automatically setup your project to use webpack for the build process making it much easier for you to use environment variables.
In almost every application you will find that you need to loop over data and display it on the webpage. A good example is a getting data from the backend, possibly filtering the results and showing this to the users. That data could be a list of products, or services or items in a shopping cart. In this lesson I will show you how to loop over lists using Vue’s v-for directive. So let’s get started.
Vue includes a built-in directive called v-for. This directive allows you to loop over data regardless if that data is stored in an array, an object or even an array of objects.
Looping Over an Array
For our first example we are going to loop through all the items in an array and generate an unordered list of the items. Here is the basic format for a v-for loop:
Here is the data in our items array:
items: ['Hammer', 'Circular Saw', 'Torque Wrench']
When this code runs it creates an unordered list showing all 3 items. It will look like this.
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.
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.