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).
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 firstname.lastname@example.org:appbaseio-confidential/vue-moviestore.git
2. Set up Environment variables
.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
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
Check out the tutorial series
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)