A Common Roadblock Going from Junior to Mid-level

Have you ever worked on a coding problem and have to constantly stop to look up syntax? You’re almost at the solution to a problem and you know exactly what you need to do, you just don’t know exactly how to do it? It’s a super common and frustrating issue and is a really good sign that you’re progressing faster in your ability to think about problems than you are in your ability to memorize less used syntax or tools.
Read more →

Should I use created() or mounted() in Vue?

All in all, the Vue lifecycle methods are fairly straight forward. There’s even a helpful Vue lifecycle chart that describes when the various methods are called. All of that is super helpful. Until you want to use them. If I want to load in data from an API, which method should I use? Why does my component crash sometimes when I try to update DOM elements in created()? Which method should I use for what?
Read more →

How to show a loading icon before data is loaded in Vue and Vuex

I hate ambiguous lag. Is this site still loading or did it freeze? Am I waiting for something or is this it? Whenever a website has to load in information from an API, there is a chance that loading will appear painfully slow to the user. Human beings perceive an empty screen much differently than they perceive an animation on the screen. 1 In order to make our website seem faster than it is, it’s always good to throw in a loading animation every time that we have to access a potentially slow resource like an API call.
Read more →

How to save data to your API using Vuex

I talked before about how to query your back-end API from Vuex, but that was mainly centered on getting data. What happens when you want to save data to a back-end API after it is updated or added in the Vuex store? What’s the best, most efficient way to accomplish this? As I talked about in my article on the purpose of Vuex, Vuex is not meant to act as a central datastore.
Read more →

What’s the purpose of Vuex?

There are a lot of things to worry about when it comes to Vue applications. You’ve got SPAs and routing and web workers and Jest and Cypress and everything else. It gets overwhelming pretty quickly. The hard part is not learning these technologies, it’s knowing what their place is in the application. So, Vuex. What the heck is it for and why might you want to use it? To start with, let me tell you what its function is.
Read more →

The basics of mapState (it’s not as hard as it looks)

If there is one thing that I see developers looking into Vuex getting hung up on the most, it’s these weird map functions that are in Vuex. The syntax is just so damn weird. What the hell are these … things doing? Why do I need them sometimes and not others? The Vuex docs seem to assume a lot here, mainly that you’re already a JavaScript guru and secondly that you’ve heard of a spread operator which is an operator so rarely used in JavaScript that you may have never seen it before.
Read more →

How to query your API using Vuex in your Vue application

Once you start using Vuex to manage the shared data of your Vue application, it becomes less clear on where or how to call your back-end API. I think everyone starts out making API calls in the created function of your component. But that doesn’t scale past a handful of components. Then, they end up loading in the same data over and over again and each component has it’s own copy, which is impossible to keep in sync.
Read more →

Loading dynamic images in a Vue Component

When I first started using Vue, one thing I got continually wrong was how to load an image into a Vue component dynamically. At first, I found that using an absolute URL worked, but that was only useful if I was storing the images on a CDN or other external site. If I included the images in my project, as either lightweight icons or static images, then using an absolute URL, with hostname and all, didn’t really work.
Read more →

Four ways to keep backend data synced with your frontend

One big question people have when building frontend applications is, what’s the best way to keep backend data synced with my frontend data? You seem to always get different answers from different people and the dreaded “It depends”. Well, what does it depend on? Here are the four main ways that developers keep their data in sync and the reasons why you might choose one over the other. 1. Refresh data on every action You could refresh the data on every action that the user takes.
Read more →

Should you always use getters in Vuex?

One of the questions that comes up time and again concerning Vuex is “Do I always use a getter when accessing data? Or can I directly access the raw state?” It’s one of those things you hear about that you should do, but no one seems to really explain why. And do you really need to create a getter for every single piece of data that you put in the store?
Read more →