Demo template (Nuxt)

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

Interactive preview:

Deploy with Vercel:

What's inside

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

Requirements

Go to Documentation > Requirements 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. To generate your own types use @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 generateTypes --filename=storeApiSchema.json

[!NOTE] Do not edit your storeApiSchema.d.ts file. It will be overwritten on the next schema generation. Instead use your shopware.d.ts file to extend types.

Styling and Shopping Experiences integration

This tempalte uses UnoCSS for styling, which is a utility-first CSS framework. It is configured to use the Tailwind CSS classes.

The template also includes a CMS Base nuxt 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

Running the application with Node.js

Execute the build script to build the application:

1
pnpm build
2

3
# or npm run build
4
# or yarn build

Execute the start script to run the application:

1
pnpm start
2

3
# or npm run start
4
# or yarn start

Running Composable Frontends with Docker

Have a look at the docker-composable-frontends repository.

[!NOTE] We recommend using a local Shopware 6 development instance (devenv) and then configuring Composable Frontends to use your local instance.

Nitro presets

More information on generating different outputs can be found here. Our recommendation is to use .env file for changing platform presets

There is an issue 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:

  1
    // nuxt.config.ts
  2
    routeRules: {
  3
      "/**": {
  4
        isr: false
  5
      },
  6
    }

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

  1
  # package.json build script
  2
  NITRO_PLATFORM=vercel-edge pnpm build

  or set the NITRO_PLATFORM env right in vercel dashboard.