Tag Archives: Vue

Adding Workbox to a @vue/cli PWA

Posted in Javascript on April 10, 2019

Workbox is the workhorse for progressive web apps of today. With only a few lines of code we get precaching, runtime caching and offline mode. In this post I’ll show how to add Workbox to an existing PWA built with @vue/cli and the pwa plugin to obtain a perfect score of 100 in Google’s Lighthouse tool.

How to add push notifications to a progressive web app

Posted in Javascript on November 21, 2018

This is the second post on building progressive web apps using the new Vue CLI 3. Push notifications will be introduced to create a native app experience. Push notifications require quite some work compared to using the Browser’s Notification API as we did so far. We need to setup a backend and add functionality to subscribe for push notifications. In addition, we also need to create a listener in the service worker to be able to show push notifications. Ready? Let’s go!

Build a progressive web app using Vue CLI 3

Posted in Javascript on October 19, 2018

Progressive web apps are great! Benefits are a wide reach because they are ‘just’ websites and pop up in search results. Moreover, they are very reliable, fast and engaging. Therefore we will explore how to develop a progressive web app using the latest technology: Vue with the new command line tool @vue/cli and plugins. In this post we quickly scaffold the app and add PWA support. Then we focus on sending notifications using the Notifications API.

Deploying a Vue single page app on Laravel Forge

Posted in Javascript on September 19, 2018

Recently we implemented a single page application in Vue. For local development we simply work on our machine using a node dev-server. However, when it is time to go public with the app, we need a deployment strategy. In this post I will explain our setup for a single page application created with Vue and how we deploy the app to a server using Laravel Forge.

Deploying a vue-cli app to a subfolder

Posted in Quick tips on December 1, 2017

Deploying a vue-cli app is very simple. However, the other day I just needed to deploy it to a subfolder on my server. I found out that all it takes is a change in the webpack config to make this work!

Transitions in Vue

Posted in Javascript on September 28, 2017

Transitions are essential when you want to create an intuitive user interface. When using Vue, transitions are easily integrated in your application. Here we discuss a use case of one of our own projects.

Did js-beautify break the internet?

Posted in Javascript on September 19, 2017

Monday september 18th, the Vue world is in shock: the vue-cli doesn’t work anymore. A new release of the js-beautify package breaks the npm install command. An issue on Github quickly gets a lot of comments. People are yelling that they can not work and can not ship app X to customer Y. A breakdown of what went wrong.

Why and when do you apply Vuex in your project?

Posted in Javascript on September 18, 2017

In this post we will look into the why and when of applying Vuex to a Vue project. Not a detailed, code-heavy tutorial, we rather focus on a simple example in which it becomes apparent that Vuex is a solution to keep the codebase tidy and maintainable.

Implementing a Tactics scoreboard in Vue

Posted in Javascript on May 9, 2016

Tactics (also known as Cricket) is a well known dart game played in many pubs and bars. The objective is to hit the numbers 20 to 10 and the bull three times each. A number is said to be complete once it has been hit three times and hitting it subsequently means scoring points (20 for hitting a 20, 19 for hitting a 19 and so forth) until your opponent completes it. The game ends when both players complete all numbers and the player with the highest score wins.

Although there are dedicated scoreboards available, I thought it would be nice to create a digital scoreboard using Vue.