Add authentication to your Vue app using Auth0

closed locks hanging from a fence
closed locks hanging from a fence
Photo by Jack T on Unsplash

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. See how easy it is to add to your Vue application so you can register and log in users with their email address and a 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 we can use Auth0 to either register a new user or log in an existing user. Once a user is logged in, then they will have access to view the About page.

Users will be able to register with the application using the email and password authentication system in Auth0. …


Image for post
Image for post
Photo by Felix Hanspach on Unsplash

AWS Amplify is a tool for adding authentication for front-end applications. See how easy it is to add it to your Vue app.

What We’ll Be Creating

We’re going to create a very simple Vue application using the Vue CLI. We’ll modify the default scaffolded application so 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.

Users will be able to register using an email and password. Once they’ve registered and logged in, they’ll be presented with the dashboard page.

Creating Our Project

I’ll be using the Vue CLI to scaffold out a project for us to start with. To do that, you need to have the Vue CLI installed on your system. …


Add Firebase auth to your Vue app

Lock on a door
Lock on a door
Photo by iMattSmart on Unsplash.

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 who are logged in.

Users will be able to register with the application using the email and password authentication system in Firebase. Once they have registered and logged in, they will be presented with the dashboard page. …


Image for post
Image for post

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. …


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. …


Image for post
Image for post
Photo by Oskar Yildiz on Unsplash

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. …


Image for post
Image for post
Photo by Photos by Lanty on Unsplash

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.

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. …


Quick Guide to using echarts and vue-echarts

Image for post
Image for post
Photo by Kai Oberhäuser on Unsplash

The heart of every application is displaying data to users. Sometimes it is very challenging to display that data using text. Charts and graphs are a great way to provide a visual representation of that data. In this article, I will show you how easy it is to create visually appealing charts in your Vue.js application.

Getting Started

I will be using the Vue CLI to scaffold out a starter application quickly. I will use both echarts and vue-echarts to add charts to our starter application. So let’s get started.

Install the Vue CLI with this…


Image for post
Image for post
Photo by SwapnIl Dwivedi on Unsplash

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.

When we do a build we get the following 2 error…


Image for post
Image for post
Photo by Estée Janssens on Unsplash

Directives are special attributes with the v- prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Vue.js provides a wide range of directives for you to use. You have probably already used the v-if, v-repeat, v-model and v-show directives.

In this article, I am going to explain the parts of a directive and what is available to use. Then I will show you how to create a wide range of custom directives so that you can apply your programming needs directly to DOM elements. …

About

Jennifer Bland

Software Engineer. Google Developers Expert. Keynote Speaker. Entrepreneur. Mountain Climber. Neil Diamond fan. World traveler. jenniferbland.com & codeprep.io

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