Strapi Starter Nuxt.js e-commerce

If you follow the content of our blog you are aware that Remi and I have embarked on the creation of starters. I created a blog starter using Gatsby, a Nuxt.js blog starter and Remi a corporate site starter using Next.js as well as a portfolio starter using Gridsome. Well today I am glad to announce that an e-commerce starter using Nuxt.js and Snipcart has been published!

This starter is a simple e-commerce application on which you can buy dev stickers with an integrated shopping cart made by Snipcart. Super easy to integrate, Snipcart offers you the possibility to sell products, downloads, or subscriptions online.

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

Thank you for taking the time to read this blog post, I'll see you soon with a new starter (with Gridsome again) ;) Enjoy this starter!

Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.

Get started with Strapi by creating a project using a starter or trying our live demo. Also, join our academy to become a Strapi expert, and consult our forum if you have any questions. We will be there to help you.