Vue.js – Leo Rojas

Vue.js Practice Project Ideas

Once you’ve done a few tutorials, usually it’s a good idea to work on something without an exact step by step guide. So, if that’s what you’re looking for, here are three project ideas that you can build. They’re all smaller projects so you can probably get them done in a couple hours to a few days. 1. QR Code Generator (Beginner) There’s a cool little service, QRtag.net, that lets you generate QR codes on the fly without any kind of backend process. You simply append the url you want to generate a QR code for to their api url

Tips for Integrating Vue.js into an Existing Project

A few months back I started to integrate Vue.js into an existing site at work. There was a new page they wanted that had a somewhat complicated UI so I thought it would be a good way to get some more experience with Vue. Since most tutorials teach you Vue from a standpoint of building a new site, I had to dig a little deeper to find out the best way to use Vue on an existing site. Here’s some of the more helpful things I learned while working on this project. Note: I’ll preface this by saying prior to

When should you use Vuex?

Have you ever heard the response: “you’ll just know”, when asking someone when you should use Vuex. Yeah, me too. When you ask this question anywhere online you get some good advice but you also get a lot of vague answers like: “You’ll just know” or “Vuex solves specific problems” (never actually says what kinds of problems) Hopefully with this post I’ll help you to know when it’s a good time to start using Vuex. I’m assuming you have an idea of what Vuex is if you found this page but just in case you don’t, here’s how the actual

Vue.js Server Side Rendering with PHP

Trying to get server side rendering to work with PHP to render your Vue.js app but are stuck? There’s a lot of great resources out there but I haven’t found anything that just works out of the box without some digging. Hopefully, after this post you’ll have a better idea of how to accomplish server side rendering for your Vue.js app! Requirements PHP 7.2 Node.js (My server has v8.9.4, I’m unsure if it will work on earlier versions, but if you have at least this version you should be good!) Creating our Vue App For this example, we’re going to

How to hide the keyboard for a SearchBar in NativeScript + Vue.js

Having trouble getting the keyboard to disappear for a search bar when working with NativeScript + Vue.js? Specifically with the SearchBar component, there isn’t an out of the box way of closing the keyboard without typing something and pressing the Search button. Closing the Keyboard Without searching you probably wouldn’t be able to figure this out, but the method that closes the keyboard is dismissSoftInput. To use it in combination with Vue.js you’ll need to first add a ref attribute to your component. Here’s an example: <SearchBar hint="Search…" ref="searchBar" /> Then in your method you would access the component like

How to detect Chrome Autofill with Vue.js

Are you having issues with Chrome autofill on your Vue.js forms? The form inputs aren’t saving the values. Or you need to know when someone is using autofill. There’s some things you can do to solve these issues. Fixing the issue of autofill not saving At work last week I was running into issues where Chrome autofill was not saving the values that were being autofilled in the input field. The value would show, but it wasn’t actually there. When you clicked inside the input, your cursor would be placed at the beginning of the input. The value from the

3 things I wish I knew before starting my first big Vue.js project

Last week I finished my first big Vue.js project. Before then I had went through a bunch of tutorials and made some small/medium sized projects in preparation to building this first big one. Here’s 3 things I learned from building this project that aren’t really mentioned in beginner tutorials. 1. Setting up folder aliases This is more of a configuration thing, and it’s understandable that it’s not really mentioned in a lot of beginner tutorials, but you can set up aliases to other folders. You don’t have to have imports that look like this: import '../../../components/SomeComponent.vue' You can set up

How to use Braintree & PayPal with Vue.js

If you’re not sure how to use the Braintree Javascript SDK with Vue.js, then you’ve come to the right place! Today we’ll be creating a payment form using Vue.js to accept payments from Braintree and PayPal. If you didn’t know, Braintree is a payment gateway owned by PayPal that allows you to accept payments online. They offer a bunch of different ways for you to accept money. The main ones being credit card and PayPal. If you want to see what else they offer, click here. Braintree actually does have pretty good documentation on how to use their library to

How to make ajax calls with Vue.js and Axios

Generally, when you’re working on medium to large scale Vue applications, you’re going to be making ajax calls to a backend api service to pull data for your frontend app. To do that, you’ll need to make ajax calls. In this tutorial, we’ll go through a quick example of how to get started with axios, a javascript library that helps to make ajax calls. Prerequisites Basic understanding of Vue.js vue-cli installed What will we be making? We’ll be using the dog.ceo api to grab a random picture of a dog to display in our app. It’s simple, but hopefully it

Let’s Learn Vue.js – Create a Hangman Game!

Vue.js is a javascript framework similar to Angular and React. It provides the tools for you to build dynamic single page applications as well as one off javascript widgets. In this tutorial you will learn the basics of Vue.js and will hopefully get to a point where you are comfortable enough to move to more advanced topics. Prerequisites & Installing Vue.js Before you can start creating a Vue.js app, you’ll need to have node installed. If you don’t, go to https://nodejs.org and follow the instructions there. If you’re on Windows, there is an installer that will handle setting everything up