Build an end-to-end e-commerce App with Vue, Nuxt, and appbase.io

by Vue.js Examples

Movies Store App (Vue + Nuxt.js + Vuex + Appbase)

This is a tutorial series aiming to teach how to build a feature-rich, scalable e-commerce app using Vue, Vuex and Nuxt.

You will learn the following concepts:

  • Basics of Vue and VueX, and how to use them effectively by building an e-commerce app from ground up,

  • Build a full-stack progressive web app with offline support,

  • Build an end-to-end app with a first class search experience,

  • The latest trends in ES6/ES7, how to use CSS-in-JS & dive into server-side rendering (SEO focused) using Nuxt.JS,

  • Learn about the following SaaS services:

  • Appbase.io (for powering search and search-driven analytics),

  • Auth0 (for user authentication functionality),

  • Stripe (for handling payments), and

  • Heroku and Vercel(for hosting the app).

Getting Started

1. Clone the repo or Unzip the project

If you’re using a Zip of the project, just unzip and go to the root directory.

If you’re accessing this via the Github repository, you can clone the project using:

git clone git@github.com:appbaseio-confidential/vue-moviestore.git

2. Set up Environment variables

Create a .env file at the root & add the following config variables:

APPBASE_URL = <YOUR_APPBASE_CLUSTER_URL>
APPBASE_APP_NAME = <YOUR_APPBASE_APP_NAME>
APPBASE_APP_CREDENTIALS = <YOUR_APP_CREDENTIALS>

3. Run the project

Run the following command to run the project locally

cd vue-moviesstore
yarn && yarn dev

Voila! Your project is live at localhost:4000.

Note: If you’re on windows, use yarn windows-dev instead of yarn dev in the above command.

4. Customize Theme

You can easily customize the app UI just by modifying the theme variables in utils/constants.js file.

Check out the tutorial series

  1. Getting Started with Vue and Nuxt.JS

  2. Basics of Vue

  3. Home Page + Layout + CSS-in-JS (Emotion.JS)

  4. Basics of VueX

  5. Appbase.io + ReactiveSearch UI Components

  6. Building The Search Page

  7. Authentication with Auth0

  8. Product Page + Checkout Page + Payment with Stripe

  9. Analytics with Appbase.io

  10. Deploying the Nuxt App:
    A) Deployment with Heroku
    B) Deployment with Vercel

  11. PWA (Progressive Web App) compatibility

If you’re looking for the React version of our series, you can check out this post that uses React, Redux, Next.JS and appbase.io:
Build an end-to-end Movie Store App with React + Redux + Appbase.io (2021)

GitHub

https://github.com/appbaseio-apps/vue-moviestore