Simple User Login in a Vue.js Web Application

Sometimes the best examples towards learning a new framework is through a simple user login sample. Login involves many concepts, including forms, data binding, routing, and potentially HTTP to a remote service, all of which are core concepts in any web application.

We’re going to see how to implement a simple login form in a web application that uses the Vue.js JavaScript framework.

Access And Change Parent Variables From A Child Component With Vue.js

When working with single page web applications (SPA), chances are you’re going to be using a router or some kind of parent and child component structure. In these scenarios, the parent components probably hold their own functions and variables that may at some point in time need to be accessed by the child component. Take for example an application that has authentication. The parent component might manage the authentication state while the child component might be a login form, secure content, or something else. When logging in, you might need to change the authentication state of the parent. This is just one of many possible examples where the child and parent need to interact.

We’re going to see how to interact with a parent component from a child component in an application created with the Vue.js JavaScript framework.

Use Chart.js To Display Attractive Charts In A Vue.js Web Application

Charts are a great way to illustrate data within an application. No one likes trying to make sense of raw data or looking at it via a table. Instead a nice bar chart or line graph can paint a perfect picture of what’s going on.

There are a lot of charting libraries available, but my personal favorite is Chart.js. It is a vanilla JavaScript library, so including it within a framework can be a little intimidating.

We’re going to see how to work with Chart.js within a project that uses the Vue.js JavaScript framework.

Use Vue.js To Generate Cold Storage Paper Wallets For DigiByte DGB Coins

To continue on my technical journey of cryptocurrency coin management, I figured it would be a good idea to share how to create a paper wallet for DigiByte DGB coins. A few weeks back I had written a tutorial titled, Generate Cold Storage Paper Wallets for Ripple XRP Coins with Angular, but we all know Ripple isn’t the only technology on the block.

In case you’re unfamiliar with paper wallets, they are nothing more than printouts that contain your private and public key information. It is separated from the internet and the paper wallets can be placed in a cold storage location like a locked safe or a bank.

We’re going to see how to use JavaScript and the Vue.js framework to generate DigiByte DGB wallet information that includes QR codes for easy scanning.

Create A Cross-Platform Desktop Ripple XRP Wallet With Vue.js And Electron

As you are probably aware, I’ve been interested in cryptocurrency and the blockchain lately. I haven’t necessarily been buying anything, but I’ve been doing a lot of watching as it has all been very interesting so far.

I decided, a few weeks ago, to purchase some Ripple (XRP) because it seems like it could do great things for the banking industry. When it came to keeping track of my XRP, there wasn’t really anything available. There is Ripple Wallet, but after having used it for a little bit, it seemed buggy. That got me thinking. What if I were to build my own wallet?

Ripple actually released a Node.js library called ripple-lib on GitHub which makes it very easy to interact with XRP. What makes things even better is that the cross-platform desktop application framework, Electron, uses Node.js.

We’re going to see how to create a cross-platform desktop application using Node.js, Vue.js, and Electron to keep track of our Ripple and how much our wallet is worth.

Upload Files To A Remote Web Service Via A Vue.js Web Application

A few weeks back I wrote about accepting file uploads in a Node.js application that uses Hapi framework. This was a followup to an article I wrote titled, Upload Files to Node.js Using Angular. What if we wanted to use a different front-end framework instead of Angular?

We’re going to take a look at using FormData and Vue.js to upload files, such as images, to a remote web service. Either of the two web services that we’ve previously created, whether it be with Hapi or Express, will work for this example.

Navigate Nested Child Routes In A Vue.js Web Application

Not too long ago I had written a few tutorials around navigation in a Vue.js web application. I had written about navigating between routes as well as passing data between routes in the form of route parameters and query parameters.

When developing a web application with a successful user interface, you’re going to want to recycle as many features as possible. Using Vue.js, it is possible to create a multiple level UI by assigning child routes to a parent route within the application. This opens the door to new possibilities in navigation.

We’re going to see how to use nested routes in a Vue.js web application by assigning child routes and views.