Add custom filters to your Vue.js project

Image for post
Image for post

If you have ever used Angular, then you’re probably familiar with filters. Vue.js allows you to define filters that can be used to apply common text formatting. A couple examples would be formatting a number to display as currency or creating a filter to capitalize the first word of a string.

How do you write a filter in your template?

Filters are created in mustache interpolations and v-bind expressions.

<!-- in mustaches --> 
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Creating a custom filter

Creating a filter is pretty straight forward and I will show you a basic overview of how to create a filter as well as a way to keep all your filters organized and separated from your main.js. …

Best practices for creating a Vue instance.

Image for post
Image for post

Vue is a popular front-end framework with similarities to Angular and React. One of the first things you’ll do when building your Vue application is creating your Vue instance.

On the internet there are a few ways that this is shown to be done but there’s not a clear distinction in the preferred method. In this post, I’m going to break down the differences and what method I have found to be the most common and best practice approach.

Method 1

The Vue documentation talks about creating a Vue instance and shows a method like the following (in your main.js): …

Part 1 of the series of Mastering VueJs explores why you should choose VueJs over other popular frameworks such as React, Ember, or Angular.

Image for post
Image for post

Vue.js has grown in popularity due to how surprisingly easy it is to learn and implement into new and existing projects. Unlike other frameworks, Vue.js doesn’t require advanced developers with years of experience to build web apps and prototypes, in fact it uses such easy to comprehend techniques that developing Vue.js web apps is a breeze compared to other solutions.

As of this writing, Vue.js has over 135k stars on Github, while React has around 126k stars. …

Image for post
Image for post

When I installed the vue-cli tools, I found myself with one major issue: I kept getting the error vue:command not foundin my terminal window when I would try and run vue --version or vue create my-project.

I followed the instructions on the website on installation of the cli tools:

npm install -g @vue/cli or yarn global add @vue/cli

It installed with no problem but the command was still not found. I even uninstalled and reinstalled with sudo but no luck either.

Here’s what I did to fix this error

When you install it, find the directory path to where it was installed. Mine was located here[replace username with your username]/Users/username/.npm-packages/bin .

Open up your bash profile: sudo nano ~/.bash_profile

Add the following: export PATH=$PATH:/Users/[username]/.npm-packages/bin replacing [username] with your username.

Save the file and restart terminal.

You can now use vue in terminal as expected.

Image for post
Image for post

Following Dave Ramsey’s plan leads to financial success and gives you hope

Like many Americans, you may be struggling with debt, over spending, and fear what’s coming in the mail (you know, collections or much worse). I know that’s how we were just a few years ago.

For a long time, we lived pay check to pay check. We never understood where our money was going, why we never seemed to have anything at the end of the month and why it was so hard to pay even the essentials. Yet on paper, we were making a decent living.

The cost of living in our city was relatively low, aside from the boom of the housing market and cost of rent soaring through the roof. We just couldn’t understand it. …

Image for post
Image for post

A simple component and ReactJs tutorial

ReactJs is a powerful javascript library built by Facebook that allows for building dynamic functionality based on components. Different from Angular in many ways, it shares an underlying concept of making development faster, efficient, and simple by allowing for reusable components that can be shared among projects.

What we’re going to build:

A fully featured component that will capitalize the first letter of a string passed into your component via props.

Let’s create our component first

CapitalizedText.js will serve as our component file and will be added to our components folder.

So let’s dissect this. The first thing we do is import React and create our class call CapitalizedText. …

Implement a simple filter into your Angular app that capitalizes the first letter of a variable output.

Download the filter here from Github.

The other day, I was implementing code on my Angular site and realized the output was being delivered as lowercase. This was generated from a third-party source, so changing the output was not really an option.

Luckily, Angular filters make this task really easy to accomplish. Check out the filter below.

The filter is really basic. It returns function that checks to make sure there’s text, it then runs a basic toLowerCase method to ensure the whole string is lowercase, then grabs the first letter and sets it to uppercase and appends it back to the rest of the string. …

Image for post
Image for post

Using the AWS API Gateway and Lambda

Image for post
Image for post

🕙 It was 10'0clock at night and I was trying to display my latest Medium posts on my own website using Medium’s API. Well …that was my first mistake.

One would think a site like Medium would have the basic functionality of retrieving my own posts using their API, but the sad reality is that the functionality just doesn’t exist…at least not yet.

Medium’s API does allow posting to your account, but retrieving your latest post is reserved for your RSS feed that can be found at,

The day was February 1, 2017 and my online portfolio was just about to hit the inner webs when it dawned on me, I am an interactive designer and a full stack developer building my website on just WordPress.

Now before you get the wrong idea, there is nothing wrong WordPress. In fact, I build custom WordPress websites for businesses, start-ups, non-profits, and many more, but when you are looking for that wow factor, you need to do more than just a custom WordPress theme, right?

So I started revamping my portfolio, which also led to a completely new look and feel, something MUCH different than anything I have done. My focus was extensively on dynamic front end interaction which would include: animations, page transitions, loading screens, pretty much anything interactive, I wanted to do it. …


Mark Fasel

Software Developer at, former frontend developer at Dave Ramsey. Front-end developer. JavaScript - Vue, React, Angular, HTML/CSS, C#, PHP, iOS, tech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store