Add Routing into a existing Vue App

I build a small app and using was ok to handle each use situation, but now I need to add routing to my existing app, then let’s go. Install the router 1-Add the router into my app using the vue-cli for add router plugin and also it will modify a few files to register a…

My Top 5 Vue Ecosystem plugins

If you have been working with Angular and React, each one of them has a lot of tools ready to help when you pick one of them to build solutions like angular material, ngx-translate, angularfire, ngxs, create-react-app, Styled Components, or redux. If you work with Vue, you need to solve the same problems and Vue…

Vue Router in 3 Minutes

The router is one of the important topics when we build single-page applications with Vue, there are a few things that I wish to know to begin and really helped me get basic tasks with VueRouter. I’m going to assume you’re already working with Vue and want to start to use VueRouter in your existing…

Kill code duplication using mixins in Vue

When we had the same code in two o more components it is a signal or smells that something is wrong, then the Mixins come to help us. The mixins allow share data, behavior, and events between components or Vue instances easily, reducing code duplication. I will give you an example, we had 2 components…

How to create a custom Vue directive

Vue allows create custom directives, modify our HTML elements and behavior, you can recognize easy because the first letter is v- like v-text or v-html. Create a Directive The directives can register global or scoped. Every directive needs the name as the first parameter and object configuration as the second parameter. Vue.directive(‘transparent’, { }); Directive Events Hooks The…

Working with v-model and forms

Vue allows design and manipulates forms elements fast and easy, this is the list of the most common task when we work with HTML forms. Binding Input Use: or v-bind into value property can help you to bind data into the HTML input or use the v-model directive. <input type=”text” :value=”username”/> <input type=”text” v-model=”username”/> Using…

HTTP errors with Element UI and Axios.

Sometimes I want to find an easy way to handle HTTP errors. Using Axios interceptors, we handle requests and responses before the then or catch. I will create a Vue EventBus instance to communicate my interceptor with the app and emit an event when some error happened. const EventBus = new Vue(); axios.interceptors.response.use( function(response) {…

Create your REST API with Express (3/3)

You are reading the third part of Create Rest API with Express, feel free to read Part 1 and Part 2 In this part, I will send a request to the POST method using Vue. Add form to send data. The first step is to include the CDN to index.html for a little styling. The HTML contains a…

Create your REST API with Express 1/2

You are reading the second part of Create Rest API with Express, feel free to read the Part 1 for continue, in this case, I will build a simple client with Vue for getting the list of documents from our API. Create my app with Vue. The only goal of this application is to get the answer…

Create your REST API with Express part 1

Today I wanted to create my own REST API using express, some friends told me about Express is allow create stateless APIS quick and easy and support HTTP verbs to able communicate with our resources getting the responses in JSON format. Prerequisites This is what you’re going to need in order to follow along with this example:…