Jennifer Bland header image
≡ Menu

How to Add Authentication to a Vue App using Firebase

Firebase provides a very simple and quick way to add authentication to your Vue.js application. In this article I will show you how easy it is to allow users to register with your application using their email and password.

What we will be creating

We are going to create a very simple Vue application using the Vue CLI. We will modify the default scaffolded application so that it provides a form to register as a new user, a login page and a dashboard page only shown to people that are logged in.

User's will be able to register with the application using the email and password authentication system in Firebase. Once they have registered and login they will be presented with the dashboard page.

[continue reading…]

Form Validation with Vuetify in a Vue App

Your forms can provide a great user experience. Here is how.

Almost every website today has a form that they ask users to fill out. A basic WordPress blog will have a contact us form. An e-commerce website will have a cart checkout form. Even our local traffic courts have a form to fill out to request rescheduling a court date.

The biggest complaint people have with forms is that they do not provide enough feedback when you are completing the form. Users fill out a form and submit it. They get an error message and have to start all over in filling out the form again.

You can minimize customer frustration by having effective form validations. I will show you how to create client-side form validation using Vuetify.

[continue reading…]

Creating a Pinterest style image gallery in Vue

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.

[continue reading…]

How to Use Environment Variables in Vue.js

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.

[continue reading…]

Intro to Vue: Looping over lists of data

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.

v-for

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:

<ul>
    <li v-for="item in items">{{ item }}</li>
</ul>

Here is the data in our items array:

data: {
  return {
     items: ['Hammer', 'Circular Saw', 'Torque Wrench']
  };
}

When this code runs it creates an unordered list showing all 3 items. It will look like this.

[continue reading…]