It happens in many projects that you start out with a rather simple table to give your client an overview of some entity, say users. When the project evolves, the number of columns changes and at some point, the client requires the table to be sortable, searchable and so on. My first pick for such a table is the neat Datatables plugin.

These are tables! (photo by Ibrahim Boran on Unsplash)

Datatables requires jQuery and has a very large set of options and capabilities so it may take a while to know how it works exactly. Fortunately, there is a lot of documentation and a helpful support forum.

In…


Part 3 Component implementation

Since usability becomes more and more important these days, this blog series covers a product configurator for a fictive webshop from concept to implementation.

Our product is a configurable postcard. You can change the text, shape of the card and the paper size. During configuration, the price is updated in real time based on your choices.

In the first part we introduced the concept, sketched a simple design and thought about the component structure. The second part introduced the Vuex store for managing the state.

In this part, we’ll implement the frontend and connect it to the store. I’ll go…


Part 2: The Vuex store

In this post I’ll describe the setup of the Vuex store for the product configurator that was introduced in part 1. The product configurator is part of a fictive webshop where customers may configure and order personal postcards.

Since usability becomes more and more important these days, this blog series covers a product configurator from concept to implementation.

Photo by Héctor J. Rivas on Unsplash

Vuex

I’ll use Vuex (with modules) to handle state. Although a product configurator seems to be a relatively small part of a webshop, using Vuex will result in a better maintainable codebase when the app grows and becomes more complex!

Moreover, Vuex is…


Part 1: concept, sketch and component definition

In this blog series I’ll discuss the process of developing a functionality we see a lot these days: a configurator for a custom product. Things that come to mind are mugs with custom text or personalized t-shirts. I’ll build a product configurator for a fictive webshop that sells postcards. An example of a custom postcard is shown below:

In the configurator of our fictive webshop, a customer should be able to choose and configure the various options and features for the postcard. For example, the shape of the card, the paper quality and the amount.

To implement such a product…


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.

Our current project is using the @vue/cli pwa plugin and already has a service worker. As outlined in the previous post on push notifications, it is the service worker that enables us to send push notifications. However, no precaching, runtime caching or offline mode…


I have been very happy with Sublime Text (v3) for a long time. However, this week I dove into TypeScript for Vue and their docs mentioned the use of Visual Studio Code (or VSCode) as their (free) editor of choice, having syntax highlighting and so on. So I thought it was time to give this editor a try.

Lately, I ditched Sublime for VS Code

I am very impressed with the intuitive interface and how fast it is (lightweight). With only a handful of extensions and half an hour of intro videos I was ready for my next project!

In this post I’ll describe the setup for…


April 8, 2020, Update

Please read the updated version of this post on our blog:

Consider the following situation.

In the morning you turn on your computer, login and spin up your vagrant virtual box. A message in your terminal reads ‘there is an update for the laravel/homestead box. Run vagrant box update to update your box’.

If you are like me and happy that everything is working great without the update, you probably leave this for a couple of days.

Today however, I had some time to take care of this update, and I wrote down the various steps for future reference. Below…


Photo by Sara Kurfess on Unsplash

Introduction

This is the second post on building progressive web apps (PWA) using the new Vue CLI 3. So far, as a first step towards push notifications, we created a PWA that sends a (normal) notification when a user clicks the button. If you haven’t read this part, it is available here.

In this post push notifications will be introduced. The terminology is a bit difficult because we’ll use notifications, messages and so on, and it’s easy to get lost. Let me try to elaborate a bit more by showing a diagram that visualizes how push notifications work.


Photo by Jamie Street on Unsplash

Introduction

About a year ago I realized that modern web applications tend to behave like native apps. These apps are called progressive web apps (PWA) and with notifications, offline functionality and the ability to install on the homescreen, they really drive user engagement. Moreover, this meant being able to write my code in familiar programming languages and serve it on all devices: clearly a win-win situation. So I dived into the subject and recently launched my very first PWA for internal use in our company.

In this post I’ll describe my setup to create a very simple PWA. An app is…


Somehow, the draft version of my post got linked to :-(
The correct version (including support for Vue CLI 3) may be found here https://medium.com/plint-sites/deploying-a-vue-single-page-app-on-laravel-forge-c7cb0f12fd2

Image by Russ Hendricks

Our current workflow

Up until recently, our workflow for building a web application has been the following:

  1. Install a fresh new Laravel project
  2. Use the ‘built in’ approach for adding specific frontend behavior with Vue

This basically means that all routing is performed by Laravel and we apply our Javascript on the html generated by the blade views. You can read more about this setup in our post here. Although this is perfectly fine for Laravel applications needing…

Pim Hooghiemstra

Love to build Laravel + Vue applications! Founder of PLint-sites. https://plint-sites.nl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store