Learn how to create a product configurator with Vue

webburo PLint-sites has a good tutorial on how to create a product configurator with Vue.js.

In this post 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. In this blog post I’ll build a product configurator for a fictive webshop that sells postcards. An example of a custom postcard is shown above.

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 configurator we’ll use Vue. In this series we won’t bother ourselves with validation or processing of the configured products, we’ll focus on the frontend only.