Using Vue in a non-SPA
I’ve spoken to a number of other developers about using Vue in applications that’s we’re single page applications but just standard MVC applications. Most of the time I get asked, “How would you do that?” So I finally sat down to explain how I do that.
I made a video first, because I seem to think better in talking it out with a demo, so you can catch that here.
Data Management in Vue: an introduction
One of the things I’ve been wanting to talk about for a while are the different ways data can be managed in a Vue application. There’s always lots of discussions on forums about how data is managed and not a lot of diving into why you would pick one style over the other.
So I made some videos. I created an application in three different styles, modeled after the three main ways of managing data and data flow in Vue.
Creating an Event Bus in Vue
There are times when building a Vue application that you realize that the standard parent-child model of intra-component communication just isn’t cutting it anymore. Everything gets too ridged and it gets harder and harder to add more layers to the application. Parent-child just doesn’t scale once you’re really working with a real-world project. Who is in control of the data when the components are nested five layers deep?
One way to handle this—coming along with its own pros and cons—is using an Event Bus.
How to format dates in Vue 3
If you’ve used Vue for any length of time, you soon find that it doesn’t have a lot of the fancy formatting options that some of the other frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren’t core to the framework is not something they want to do. One of those features, however, is formatting dates.
What are services in Vue?
You might have heard the term “service” in relation to a Vue application. But looking through the Vue documentation, you might find that there isn’t any mention of what a service is at all.
So when someone says “Just put that in a service”, what is that supposed to mean and what are you supposed to do about it?
What is a service? When someone mentions adding a service to an application, that just means that you are going to create a JavaScript file that will export something for you to use in your application.
How do you maintain multiple loading states in Vuex?
One of the best ways to improve the user experience in a dynamic application is by setting up loading icons for data coming into your Vuex store. But if you’ve ever tried to set this up on a page with a lot of components that are loading different dynamic data. How do you show the user that data is being loaded when that data might be coming from different, parallel API calls?
An amazing demo playground for JavaScript - RunJS
Recently, I was wanting to try out some of the functions in Lodash to see how they worked. I went to Repl.it at first because that’s been my go-to sandbox to play around in. But Repl.it, as nice as it is, is a little too big for a quick script to play around in.
But that’s when I found RunJS - A playground for JavaScript and TypeScript. This little application (for Windows, Mac, and Linux) lets you run a full Node environment with NPM support in a small, clean application.
Why does changing my copy change the original!
Have you ever been working on your JavaScript code and changing the value of an object you were sure that you made a safe copy of only to have the original object change too?
And then you looked up why the heck that was happening, you read a blog post saying “Use Object.assign() instead”. But you do that and it still freaken happens?
Then someone says that you have to download lodash and use the cloneDeep() method?
How to Load Vue Components on Non-SPA Sites
There are times when you want to use Vue components, but the application you’re working on is still in the age of jQuery. Is there a way to start using Vue without switching everything to Vue and making a single page application? Can we get all of that beautiful, juicy component action without breaking everything else that’s currently on the site? Also, can we add Vue components without having to rewrite the entire website to use Vue?
Learning Programming is All About Learning Concepts
One of the main pieces of advice that people give in learning programming is that you should pick a language and learn it. Just pick the language that you think you’ll most want to do, get a couple of classes or tutorials on it, and learn programming!
I think that that’s pretty bad advice. Someone who knows nothing about programming, picking up a language, and trying to learn that language is an extremely inefficient and slow way of learning how to program.