Creating a product configurator with Vue #2
Posted in Javascript on May 15, 2019
In the previous post I introduced our fictive webshop with a product configurator. The plan is to build this configurator using Vue. To manage the state of the application I’ll use Vuex. In this post the Vuex store is introduced with modules, state, actions and mutations. At the end I even include a small test implementation.
Read more
Creating a product configurator with Vue
Posted in Javascript on May 1, 2019
We see it more and more these days: product configurators in webshops. The customer may choose from a wide variety of options to create a personalised product. The techniques to develop such a product configurator also vary widely. In this blog series I’ll discuss our approach using Vue. In the first part I’ll go over the concept, a sketch and defining the components.
Read more
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.
Read more
Why I ditched Sublime for VS Code
Posted in Development on March 13, 2019
Lately I decided to give a new code editor a try: VS Code. Coming from Sublime I quickly learned how to use it and it has become my favourite editor over time. In this post I’ll discuss my setup and why I like this editor more than Sublime.
Read more
How to update your Laravel Homestead Box
Posted in Development on February 13, 2019
Post updated 2023-10-23
The process of updating your laravel/homestead box is a bit daunting. Questions poup up in your mind. Questions like: Will things still work as they did? I am good now, why should I update? This post is my attempt to create a recipe for this update with some gotcha’s I wish I knew …
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!
Read more
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.
Read more
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.
Read more
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!
Read more
Laravel-mix and the spread operator
Posted in Quick tips on November 17, 2017
Out of the box, the excellent Laravel-mix package does not support the use of the ES6 object spread operator. Here is a quick tip which enables it in your project. Very usefull in combination with Vuex/ Redux implementations in which you often want to quickly clone an object.
Read more