Strapi Starter Nuxt.js E-commerce

Nuxt.js starter for creating a simple e-commerce website with Strapi.

This starter allows you to try Strapi with Nuxt.js with the example of a simple e-commerce website where you can buy dev stickers. It is fully customizable and due to the fact that it is open source, fully open to contributions. Do not hesitate to add new features etc ...

This starter is using Snipcart which allows you setup a shopping cart on any website.

Deploy the backend

To deploy the Strapi instance you'll need:

An Heroku account for free
A Cloudinary account for saving images for free

Once you have created these accounts you can deploy your instance by clicking on this button

Deploy the frontend

On Vercel

To deploy the Nuxt.js blog you'll need:

A Vercel account for free
Wait for your heroku instance to be up and running before deploying your Nuxt.js server
Vercel will ask you the root directory of the project to deploy which is frontend

Select the repository you want to deploy, here it's the strapi-starter-nuxt-e-commerce
Select the root directory of your frontend
Override the Build commande to yarn generate

Paste the url of your running Strapi instance on Heroku without the trailing slash

Once your website has been deployed, create a STORE_URL env variable in your dashboard containing the url of your deployed frontend

Automatic build on Vercel

We're using Nuxt.js which is a static site generator (SSG). This means we need to trigger new builds when the content changes in Strapi. We'll use webhooks to do this automatically.

We first need to create a Deploy Hook in Vercel. In your project's settings, go to the end of the Git Integration tab. Name your hook however you want, but make sure you link it to your master branch.

Then copy the generated URL and open your Strapi admin in production. In the settings tab, open Webhooks and paste the hook URL. Make sure you check all events to trigger build after every change.

Now everytime we make a change in Strapi, Vercel creates a new build!

Features in Strapi

1 Component
2 Collection types: Product, Category
27 Created products
6 Created categories
Permissions set to true for product and category
Responsive design using Tailwind css
Slug system
Publication system (draft & published)
Role based access controls

Features in Nuxt.js

@nuxt/strapi module

Payment service

This starter is using Snipcart which allows you setup a shopping cart on any website. They wrote a tutorial teaching you how to create this website but selling cupcakes!

Payment will not work on localhost, we are redirecting you to this tutorial if you want to test payment locally.

Getting started

Clone the repository

git clone https://github.com/strapi/strapi-starter-nuxt-e-commerce.git
cd strapi-starter-nuxt-e-commerce

Backend

Install dependencies and run your server

# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop

Frontend

# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop

Nuxt.js server is running here => http://localhost:3000

Enjoy this starter

chonyaver / strapi-starter-nuxt-e-commerce.github.io