Photo by on Álvaro Serrano Unsplash “I’m a developer, not a God d*mn point & click machine.” That’s my dev friend Nic. We’re talking e-commerce. Few pints in and he cranks up the ranting: “You know what I don’t like? Here: Coding in a closed ecosystem Rigid all-in-one platforms for everyone and their dog Not choosing my tech stack If you want that Shopify site so bad, you can do it yourself, you don’t need ME (dev).” I love Nic. And he’s right: there’s a plethora of cool / out there. Why not create a custom, kick*ss shopping experience with these instead? frameworks tools Today I want to use Vue.js to show you that’s possible. Because yeah, Vue.js e-commerce a thing! is And with the right set up in the backend — , namely — it can be a darn cool thing. headless content management Enough babbling, here’s what this Vue e-commerce example will include: How to create a neat, frontend Vue storefront How to integrate a customizable HTML/JS cart in a Vue app How to hook the Vue e-comm. app with headless ButterCMS Now let’s make my friend Nic proud, shall we? First, why Vue for e-commerce? So, if you haven’t heard already: . Vue is a progressive, lightweight JS framework for building web UIs It’s open source, community-supported, reactive, component-based. It’s also quite “incremental” — can be dropped in any existing projects — and works wonders for logic concerns separation. So why use Vue for e-commerce, huh? It makes for a modular, easily portable store frontend — plays well with any backend. It’s fast, with high performance — speed is key in e-commerce. It’s just… to get started with development! easy In this quick tuts, I’m going to abstract some of the cart & e-comm. logic by using Snipcart. But you could very well build your own Vue.js shopping cart & hook it to Stripe, for instance. Oh, and another compelling use case for Vue e-commerce: (PWAs). If your shopping context requires graceful degradation and/or offline functionalities, building an e-comm. PWA with Vue becomes quite handy. On that note, you might want to check out . progressive web applications Vue Storefront Sidenote: we’ll most likely be exploring PWAs in an upcoming blog post. :) And why power e-commerce with a headless CMS like Butter? ButterCMS is headless CMS. Or an API-first CMS, or a Content API, or whatever else the next marketing guy decides to call it. :) Why use a headless CMS as an e-commerce backend, you ask? Well, for starters, maybe you’re just tired of using behemoths like Magento or Prestashop. Or maybe you want your online store to benefit from a headless CMS’ pros: Portable, easy to migrate content models & store data Hosted — no sh*tty, recurring upgrade and patching jobs (w/ Butter) Multi-platform content delivery (mobile, desktop apps, IoT, web) I don’t want to get too deep into headless e-commerce’s ins and outs, because we have a full post coming on that topic. However, I’d like to highlight some of the good stuff ButterCMS brings to the table: 1. It has intuitive, thoroughly-documented content modeling.2. Its onboarding is smooth and effective.3. It has in-depth, . stack-specific integration recipes The latter gave me a tremendous head start for this Vue tuts! Tutorial: Vue.js e-commerce with Butter CMS & Snipcart Pre-requisites Basic knowledge of Vue.js (forever free in Test mode) Snipcart account ButterCMS account 1. Configuring ButterCMS for headless product management ButterCMS allows to easily create page types with any required fields. This can all be done without any code or schemas definition from the CMS. Start by creating a page type with fields for every required attribute of (data-item-id, data-item-name, data-item-price). I didn’t define the product URL used for price validation: it will be generated later by code. Product Snipcart’s product definition You can see that I’ve also added a description field. It’ll map to Snipcart’s . You could if you want! data-item-description add more fields You should now be able to create content pages of the Product type: 2. Building a Vue.js storefront Following , I’ve used to generate my e-commerce demo. But you could easily add Butter to an existing project. ButterCMS’ Vue guide vue-cli Now, create a simple file. Then initialize Butter's library with your to import that file into your Vue.js components: src/buttercms.js Butter public API Key Use the routes below for your Vue app: a list of products, a page for the products’ details and a component (to be re-used later). NotFound Here comes the fun part. To show products from Butter’s API, just call from the component's hook. Then, the reactivity of Vue will work its magic! butter.page.list('product') ProductList created Okay, that was easy. How about displaying the page for a single product? Just use the parameter from your route! slug You can see above that I’ve used the error handler of the to set a flag. In the component's template, this allows you to either display the product's details or without changing the URL: Promise notFound the NotFound page Now for integrating Snipcart, create a simple component: BuyButton Because this e-commerce demo is a Single Page Application, I’ve added a to make work. Netlify Function Snipcart product validation You could have used or any serverless tech. The function uses Butter API from Node.js to retrieve products and output them to be parsed by . Webtask Snipcart’s JSON Crawler And there you have it: a Vue.js e-commerce website powered by ButterCMS. You could push this a bit further, though. Butter offers webhooks that can be used to automate tasks. You can use them to notify Snipcart of CMS updates on products so your e-comm. dashboard reflects the changes automatically. Quite simple, really: Validate that you’re receiving a call related to products Call to force a fetch of the product’s definition Snipcart’s API Here: Voilà. As soon as you add or edit a product in the CMS, its details will be available in Snipcart’s Dashboard. You could use that, for instance, to set an available stock for inventory management in your Dashboard. Now let’s have a look at that ButterCMS + Vue.js e-commerce demo! Live demo & GitHub repo See live demo here See GitHub repo here Closing thoughts Bundling this whole thing together and making it look decent took me two days tops. Of course, I loved working with Vue for this e-commerce demo. And Using ButterCMS was a smooth as its name suggest. Constructive feedback: I would have liked to get an edition API — it could’ve allowed me, for instance, to sync a flag in the CMS for out-of-stock products. Well, that’s it, folks! Here’s hoping this post nudges you towards killer, custom e-commerce. :) If you’ve enjoyed this post, please take a second to clap & share it on Twitter . Got comments, questions? Hit the section below! I originally published this on the Snipcart blog and shared it in our newsletter .

Fetch

Google

Progressive

Stripe

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Build Vue.js E-Commerce on Top of Headless ButterCMS [Demo]

Too Long; Didn't Read

Companies Mentioned

Jean-Sébastien Tremblay

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Build Vue.js E-Commerce on Top of Headless ButterCMS [Demo]

Too Long; Didn't Read

Companies Mentioned

Jean-Sébastien Tremblay

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES