Getting Started with Vue.js Navigation Guards to Restrict Access to Routes

You might remember that I had written a tutorial titled, Simple User Login in a Vue.js Web Application, which demonstrated how to navigate between routes and check a variable to determine if a user should in fact be allowed to be on a particular route. This previous tutorial focused on applying logic after the user had already completed the navigation process, rather than during or prior. While this is a good introduction to becoming familiar with the Vue.js router, it isn’t a realistic approach to handling user login and route restrictions.

The recommended approach is to use navigation guards, sometimes referred to as route guards.

In this tutorial, we’re going to see how to use Vuex with Vue.js navigation guards to protect certain pages within the application from unauthorized access.

Query A GraphQL API With Vue.js And Axios

I’ve written quite a bit of content around developing a GraphQL API with various programming technologies such as Node.js, Golang, and Java. Heck, I even wrote an eBook on the subject titled, Web Services for the JavaScript Developer. However, I haven’t really produced any content around interacting with those APIs using modern frameworks and client facing technologies, only cURL and Postman.

So how do you interact with a GraphQL API using something like Angular, React, or Vue.js?

There are a lot of frameworks to cover, but in this particular tutorial we’re going to see how to use Vue.js and simple JavaScript to interact with a GraphQL API.

Implementing U2F Authentication With Hardware Keys Using Node.js and Vue.js

Not too long ago I had written a tutorial titled, U2F Authentication with a YubiKey Using Node.js and jQuery, which demonstrated how to use hardware keys as a means of universal two-factor (U2F) authentication. However, I had left some things to be desired in that previous post. For example, the previous tutorial did not use proper session management with Express.js and it used jQuery, which is neat, but by no means is as popular as some of the other web frameworks that currently exist.

In this tutorial, we’re going to expand upon what we had done previously, but implement proper session management with Express.js and use Vue.js, which is a modern web framework.

Manage Sessions Over HTTPS With Node.js And Vue.js

A long time ago when I had been exploring session management in Node.js, I had written a tutorial titled, Session Management in Your Express.js Web Application. This was a basic tutorial that is still very functional today, however little things have changed since then when it comes to how the web works. For example, in 2015 HTTPS was never a requirement and we weren’t exposed to all the frontend web frameworks that exist today.

When you start introducing things into your web applications such as HTTPS or micro-services that operate on different origins or ports, or frontend frameworks, session management can get a little more complicated. We’re going to see how to maintain a session for a user using Node.js with Express.js on our backend and Vue.js on our frontend, in this tutorial.

Build Electron Applications With Vue.js And Webpack

If you’re like me, you thought you’d try to build a cross-platform desktop application using the very popular Electron framework as well as the very popular Vue.js JavaScript framework. At first glance it might seem as easy as defining an Electron configuration, but in reality, a little more needs to be done when using Webpack to build the project.

I had written a few tutorials a while back around Electron, and even one with Vue.js, but in that example the Vue CLI and Webpack were not part of the equation. In this tutorial, we’re going to see how to create a new Vue.js application using the Vue CLI, configure it for use with Electron, and then deploy it in all its glory.

Releasing An Android Application Built With NativeScript And Vue.js

So you’ve just built an awesome new Android application using NativeScript and the Vue.js JavaScript framework and you’re wondering what’s next. Unless this is an internal application, you’re probably going to want to publish the application to a marketplace like Google Play. The thing is, up until now, you’ve probably only been working with a debug build of your Android application and binary.

We’re going to see how to take a NativeScript application that uses Vue.js and build an Android binary for release using a signing key and some command line magic.

A Vue.js App Using Axios With Vuex

In this tutorial we will build a simple Vue.js application which will demonstrate the power of using Vuex as a central data store, where the data will be asynchronously retrieved using Axios for the API requests.

A basic level of HTML, CSS and JavaScript will be beneficial but is not required.