---
title: "Shopware Ecommerce Store with Nuxt"
description: "A reference ecommerce store implementation using Shopware, Nuxt 3, and Tailwind CSS."
url: "https://vercel.com/templates/nuxt/shopware-nuxt-ecommerce"
links:
  repository: "https://github.com/shopware/frontends/tree/main/templates/vue-demo-store"
  demo: "https://frontends-demo.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Shopware+Ecommerce+Store+with+Nuxt&demo-description=A+reference+ecommerce+store+implementation+using+Shopware%2C+Nuxt+3%2C+and+Tailwind+CSS.&demo-url=https%3A%2F%2Ffrontends-demo.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3RvOl1gY6tZovc5eBAMdWx%2F91a7eadb74bb0fb8b236b4621549689f%2Fshopware-vue-nuxt-demo-thumbnail.png&project-name=Shopware+Ecommerce+Store+with+Nuxt&repository-name=shopware-nuxt-ecommerce&repository-url=https%3A%2F%2Fgithub.com%2Fshopware%2Ffrontends%2Ftree%2Fmain%2Ftemplates%2Fvue-demo-store&from=templates&skippable-integrations=1"
---

# Shopware Ecommerce Store with Nuxt

A reference ecommerce store implementation using Shopware, Nuxt 3, and Tailwind CSS.

# Demo template (Nuxt)

![Shopware Frontends](https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/.assets/shopware-frontends-logo.png?raw=true)

This repository is an example demo application built with Shopware Frontends Framework and Nuxt 4.

> **⚠️ Do not use this template to start a new project.** Use the [Vue Starter Template](https://github.com/shopware/frontends/tree/main/templates/vue-starter-template) instead. It builds on Nuxt layers, so it stays maintainable and picks up updates automatically.
>
> This template is deprecated. It stays in the repository as a reference implementation. Read it for patterns, do not build on it.

## What's inside

- Nuxt 4 application
- Required libraries (API client, CMS components, composables, Nuxt module)
- Pre-configured demo Shopware 6 API

## Requirements

Go to [Documentation > Requirements](https://developer.shopware.com/frontends/framework/requirements.html) to see the details.

## Set up your Shopware 6 instance

To connect to a different API, adjust the API credentials in the `nuxt.config.ts` file:

`Shopware:`{`endpoint` and `accessToken`}.

## Install & Run

1. `pnpm i` to install dependencies
2. `pnpm dev` to run the project with the development server

## Generate your own API types

By default API types are delivered from our [demo instance](https://frontends-demo.vercel.app/).
To generate your own types use [@shopware/api-gen](https://www.npmjs.com/package/@shopware/api-gen) CLI.

1. update `.env` file with your Shopware API information
2. load JSON schema from your instance `pnpx @shopware/api-gen loadSchema --apiType=store --filename=storeApiSchema.json`
3. generate types `pnpx @shopware/api-gen generate --apiType=store` (or run `pnpm generate-types`)

> [!NOTE]
> The template uses the types shipped with `@shopware/api-client` until you generate your own. Do not edit a generated `api-types/storeApiTypes.d.ts` file; it is overwritten on the next schema generation. Switch `shopware.d.ts` to the generated file after `generate-types`, and put extra endpoints in `storeApiTypes.overrides.ts`.

## Styling and Shopping Experiences integration

This tempalte uses [UnoCSS](https://unocss.dev/) for styling, which is a utility-first CSS framework. It is configured to use the [Tailwind CSS](https://tailwindcss.com/) classes.

The template also includes a [CMS Base nuxt layer](https://www.npmjs.com/package/@shopware/cms-base-layer) to provide the CMS components for Shopping Experiences integration. The layer is registered in the `nuxt.config.ts` file. In order to override the default Tailwind CSS configuration, you can create your own `uno.config.ts` file in the root of your project and extend the default configuration.

## Production

Refer to to the Shopware documentation for best practices on deploying a production JavaScript application with Shopware: [Best Practices > Deployment](https://developer.shopware.com/frontends/best-practices/deployment.html)

### Running the application with Node.js

Execute the `build` script to build the application:

```bash
pnpm build

# or npm run build
# or yarn build
```

Execute the `start` script to run the application:

```bash
pnpm start

# or npm run start
# or yarn start
```

### Running Composable Frontends with Docker

Have a look at the [docker-composable-frontends repository](https://github.com/shopwareLabs/docker-composable-frontends).

> [!NOTE]
> We recommend using a local Shopware 6 development instance ([devenv](https://developer.shopware.com/docs/guides/installation/devenv.html#devenv)) and then [configuring](https://developer.shopware.com/frontends/introduction/templates/demo-store-template.html#configure) Composable Frontends to use your local instance.

### Nitro presets

More information on generating different outputs can be found [here](https://nitro.unjs.io/deploy).
Our recommendation is to use `.env` file for changing platform presets

#### Vercel serverless functions and ISR

There is an [issue](https://github.com/nitrojs/nitro/issues/1880) with Vercel serverless functions and ISR for catch-all route and dynamic data that depends on GET query parameters.

To fix it, you need to do one of the following:

- disable `isr` for the catch-all route:

  ```js
    // nuxt.config.ts
    routeRules: {
      "/**": {
        isr: false
      },
    }
  ```

- switch to `vercel-edge` platform by setting the corresponding preset:

  ```bash
  # package.json build script
  NITRO_PLATFORM=vercel-edge pnpm build
  ```

  or set the `NITRO_PLATFORM` env right in vercel dashboard.

## Related Templates

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit)

Next.js template for building multi-tenant applications with the App Router and Redis.

### [Next.js Shopware Starter](https://vercel.com/templates/next.js/nextjs-shopware-starter)

Headless Shopware Starter Template for commerce built with React and Next.js.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.