Strapi Starter Nuxt.js E-commerce

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 Product and Category collection 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-commerce to 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/strapi module 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.