Strapi Starter Nuxt.js E-commerce is a deprecated starter template for building a simple e-commerce storefront with Nuxt.js as the frontend and Strapi as the headless backend. It was created by the Strapi team to demonstrate how a Nuxt.js application and a Strapi API work together, using the example of a store that sells developer stickers.
What is the Strapi Starter Nuxt.js E-commerce?
The starter is a monorepo scaffold produced by the create-strapi-starter CLI. It generates two separate projects: a Nuxt.js frontend and a Strapi backend. The backend comes pre-loaded with 27 products and 6 categories across two collection types, Product and Category. The frontend consumes Strapi's API through the @nuxt/strapi module, and payments are handled by Snipcart. The template runs on Node.js and uses Tailwind CSS for responsive styling.
Key features
- Pre-populated content — 27 products and 6 categories are created out of the box, stored in Strapi's
ProductandCategorycollection types. - Open permissions — Read permissions for products and categories are set to
true, so storefront content is publicly accessible without extra configuration. - Slug system — Each product and category gets a URL-friendly slug, enabling clean product and category pages.
- Draft & published workflow — Strapi's publication system lets you preview unpublished products before going live.
- Role-based access control — Strapi's built-in users-permissions plugin provides role-based access to the admin panel and API.
- Snipcart integration — The storefront connects to Snipcart for shopping cart and checkout, with a link to Snipcart's tutorial for testing payments locally with ngrok.
- Responsive Tailwind CSS layout — The Nuxt frontend uses Tailwind CSS to create a responsive design without a separate CSS framework.
Who should use this starter?
Developers learning how to pair the Nuxt.js frontend framework with the Strapi CMS will find this starter a practical reference. E-commerce developers can use it as a starting point for a storefront that needs a simple product catalog and third-party checkout. The example code is also suitable for students following Snipcart's tutorial, which walks through building the same site selling cupcakes.
What can you do with it?
- Scaffold a full-stack store — Run
npx create-strapi-starter@3 my-site nuxt-e-commerceto generate the monorepo, install dependencies, and start both the Nuxt frontend on port 3000 and the Strapi backend on port 1337. - Study a real Strapi/Nuxt data flow — Inspect how the
@nuxt/strapimodule fetches products and categories and how the slug system builds routes. - Customize the product catalog — Replace the sample stickers with your own products and categories through the Strapi admin panel.
- Test Snipcart payments — Follow the linked ngrok tutorial to make Snipcart's checkout work on a locally exposed endpoint.
How does the starter work?
Running the CLI command creates a monorepo, installs dependencies, and starts both servers automatically. The Nuxt frontend runs at http://localhost:3000 and the Strapi backend at http://localhost:1337. To deploy to production, you deploy the frontend and backend folders separately and set the API_URL environment variable on the frontend to point to the Strapi backend URL without a trailing slash.
Deprecation notice
This repository is no longer maintained and only works with Strapi v3. For Strapi v4 starters, the Strapi team points to the starters-and-templates monorepo. The Snipcart tutorial that complements this starter remains available for learning the integration pattern.
