Building a Mini Ecommerce Application with Vue.js, Strapi, and Flutterwave
Are you looking to create a seamless ecommerce experience for your customers? Look no further! In this tutorial, we’ll guide you through building a mini ecommerce application using Vue.js, Strapi, and Flutterwave.
The Power of Ecommerce Applications
Building ecommerce applications offers a unique opportunity to learn how to handle data from remote sources and intentionally build web applications that communicate with different services. As a frontend developer, you’ll be excited to learn how to build backend services that communicate effortlessly with your frontend application.
Tooling
To build this tutorial, we’ll be using the following tools:
- Vue.js: A lightweight progressive JavaScript framework for building user interfaces
- Strapi: An open-sourced headless content management system completely built with JavaScript
- Flutterwave: An online payment gateway that makes it possible for customers to pay for your products anywhere in the world
Prerequisites
Before we dive in, make sure you have:
- Node.js installed on your computer
- An account on Flutterwave
- Familiarity with Vue.js and JavaScript
- Postman installed (a Google Chrome tool for interacting with HTTP APIs)
Getting Started
Let’s create a Strapi project using the Strapi CLI. Open a terminal window and run the command: npx create-strapi-app myapp --quickstart. This will set up the project with an SQLite database. If you intend to create a new project with a different database, you can omit the flag and the CLI will prompt you to choose your preferred database.
Creating a /products Endpoint
We’ll use Strapi to create a /products endpoint that returns a list of products we’ll be selling on our ecommerce store. To do this, create a Product content type by clicking the big blue button and filling out the form. We’ll need four fields for title, description, price, and image.
Building the Vue App
Now that we have our endpoint ready, let’s create the client to consume the data we’ve prepared on the server and display these products to customers. We’ll use the Vue CLI tool to scaffold a new Vue project. Run the following commands: npm install -g @vue/cli and vue create myapp.
Styling
We’ll use BootstrapVue to style our application. Install Bootstrap and BootstrapVue by running npm install bootstrap-vue bootstrap.
Fetching Products
Create a new Meals component to handle the API communications with our Strapi project. We’ll use Vue’s mounted() lifecycle method and the native browser API fetch to call the /products endpoint when our app loads.
Rendering Products
Use BootstrapVue’s UI components and Vue directives to render the product details in our Meals component. We’ll iterate and render the individual products returned from the endpoint to show the product title, description, price, and image respectively.
Implementing Payments with Flutterwave
Flutterwave offers the easiest way to make and accept payments from customers anywhere in the world. To integrate Flutterwave, create an instance of Flutterwave’s inline checkout modal and append it to the DOM using Vue’s created() lifecycle method. Define the placeOrder() function that will activate the Flutterwave’s checkout modal when the order meal button is clicked.
The Final Result
With Strapi, we quickly built a /products endpoint that returns a list of products. With Vue, we built the client that consumes the products we created with Strapi to allow users on our store view and interact with our products. Finally, we integrated Flutterwave to allow customers pay for these products from anywhere in the world.
Take Your Ecommerce Application to the Next Level
Want to experience your Vue apps exactly how a user does? Try LogRocket, a DVR for web and mobile apps that records literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more.