### Install Dependencies and Build Packages

Source: https://github.com/shopware/frontends/blob/main/AGENTS.md

Initial setup commands to ensure all dependencies are installed and packages are built before starting development.

```bash
# Ensure dependencies are installed
pnpm i

# Build packages if working in templates/apps
pnpm run build --filter='./packages/*'
```

--------------------------------

### Install Dependencies and Run Development Server

Source: https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/README.md

Use these commands to install project dependencies and start the development server for local development.

```bash
pnpm i
```

```bash
pnpm dev
```

--------------------------------

### Install Dependencies and Run Dev Server

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/integrations/cms/storyblok.md

Install project dependencies using pnpm and start the development server.

```bash
pnpm i && pnpm run dev
```

--------------------------------

### Install and run blank template

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/blank-template.md

Set up the vue-blank template manually in a new directory and start the development server.

```bash
npx tiged shopware/frontends/templates/vue-blank vue-blank && cd vue-blank
npm i && npm run dev
```

--------------------------------

### Install and Run Lumora Store

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/vue-starter-template-extended.md

Navigate into the `lumora-store` directory, install its dependencies, and then start the development server to run the extended template.

```bash
cd lumora-store
npm i && npm run dev
```

--------------------------------

### Set up and run Astro template locally

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/astro-template.md

Run these commands in a new directory to clone the Astro blank template, install dependencies, and start the development server.

```bash
npx tiged shopware/frontends/templates/astro astro-blank && cd astro-blank
npm i && npm run dev
```

--------------------------------

### Quick Start Commands

Source: https://github.com/shopware/frontends/blob/main/AGENTS.md

Essential pnpm and Turbo commands for installing dependencies, building packages, running the demo store, and executing tests in the Shopware Frontends monorepo.

```bash
pnpm i                                    # Install
pnpm run build --filter='./packages/*'   # Build packages
pnpm run dev --filter=vue-demo-store     # Run demo
pnpm run test                             # Test
pnpm changeset                            # Create changeset for PR
```

--------------------------------

### Start Development Server

Source: https://github.com/shopware/frontends/blob/main/examples/i18n-multi-domain/README.md

Start the development server on http://localhost:3000 using your preferred package manager.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun run dev
```

--------------------------------

### Install and Run Shopware Frontends Project (pnpm)

Source: https://github.com/shopware/frontends/blob/main/README.md

Use these pnpm commands to set up the development environment, build core packages, and start the Vue starter template for local development.

```sh
# Install dependencies
pnpm i

# Build packages
pnpm run build --filter='./packages/*'

# Run project base
pnpm run dev --filter=vue-starter-template
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/shopware/frontends/blob/main/examples/express-checkout/README.md

Install all project dependencies required for the PayPal express checkout example.

```shell
pnpm install
```

--------------------------------

### Scaffold and run Vue Starter Template with npm

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/framework/requirements.md

This command scaffolds the Vue Starter Template into a new directory 'my-store', navigates into it, installs dependencies, and starts the development server using npm.

```bash
npx tiged shopware/frontends/templates/vue-starter-template my-store && cd my-store
npm i && npm run dev
```

--------------------------------

### Start the development server

Source: https://github.com/shopware/frontends/blob/main/examples/b2b-employee-management/README.md

Starts the local development server, typically accessible at http://localhost:3000.

```bash
# npm
npm run dev
```

```bash
# pnpm
pnpm run dev
```

```bash
# yarn
yarn dev
```

```bash
# bun
bun run dev
```

--------------------------------

### Setup Shopware Admin API Client with Credentials

Source: https://github.com/shopware/frontends/blob/main/packages/api-client/README.md

Initialize the Admin API client with a base URL and optional credentials. This example demonstrates both password-based authentication and token-based authentication (client credentials grant).

```typescript
import { createAdminAPIClient } from "@shopware/api-client";
import type {
  operations,
} from "@shopware/api-client/admin-api-types"; // we take default admin api types from different directory than store-api - use your own types by generating schema with @shopware/api-gen CLI
// import type { operations } from "./api-types/adminApiTypes"; // or use your own types generated by @shopware/api-gen CLI

const adminApiClient = createAdminAPIClient<operations>({
  baseURL: `${process.env.SHOP_URL}/api`,
  credentials: {
    grant_type: "password",
    client_id: "administration",
    scope: "write",
    username: process.env.SHOP_ADMIN_USERNAME,
    password: process.env.SHOP_ADMIN_PASSWORD
  },
  // credentials: { // or token-based example
  //   grant_type: "client_credentials",
  //   client_id: "administration",
  //   client_secret: process.env.SHOP_ADMIN_TOKEN,
  // },
});

await adminApiClient.invoke(...); // invoke defined endpoint
```

--------------------------------

### Start Production Application

Source: https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/README.md

After building, use one of these commands to run the compiled application in a production setting.

```bash
pnpm start
```

```bash
npm run start
```

```bash
yarn start
```

--------------------------------

### Quick Start Development Commands

Source: https://github.com/shopware/frontends/blob/main/packages/api-client/AGENTS.md

Use these commands to build, run in development mode, and execute tests for the API client package.

```bash
pnpm run build    # Build the package
pnpm run dev      # Stub mode for development (hot reload)
pnpm run test     # Run tests
```

--------------------------------

### Install Project Dependencies (npm)

Source: https://github.com/shopware/frontends/blob/main/examples/blank-playground/README.md

Installs all necessary project dependencies for the Shopware Frontends blank playground.

```sh
npm install
```

--------------------------------

### Quick Start Commands for @shopware/cms-base-layer

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/AGENTS.md

Commands to build, develop, and test the @shopware/cms-base-layer package locally.

```bash
pnpm run build  # Build the package
pnpm run dev    # Stub mode for development
pnpm run test   # Run tests
```

--------------------------------

### Install Shopware API Client

Source: https://github.com/shopware/frontends/blob/main/packages/api-client/README.md

Install the `@shopware/api-client` package using various package managers like npm, yarn, pnpm, bun, or deno.

```sh
npx nypm install @shopware/api-client
```

```sh
npm install @shopware/api-client
```

```sh
yarn add @shopware/api-client
```

```sh
pnpm install @shopware/api-client
```

```sh
bun install @shopware/api-client
```

```sh
deno install @shopware/api-client
```

--------------------------------

### Run development server

Source: https://github.com/shopware/frontends/blob/main/examples/commercial-customized-products/README.md

Start the development server using pnpm for local development and testing.

```shell
pnpm dev
```

--------------------------------

### Install Shopware Frontends dependencies

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/custom-vue-project.md

Install the core Shopware Frontends packages required for API client and composables functionality.

```bash
pnpm add @shopware/composables @shopware/api-client
```

--------------------------------

### Install project dependencies

Source: https://github.com/shopware/frontends/blob/main/examples/b2b-employee-management/README.md

Installs all required project dependencies using the specified package manager.

```bash
# npm
npm install
```

```bash
# pnpm
pnpm install
```

```bash
# yarn
yarn install
```

```bash
# bun
bun install
```

--------------------------------

### Render a CMS Page with CmsPage Component in Vue

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/public/cms/CmsPage.md

This example demonstrates how to fetch a landing page and render its CMS content using the `CmsPage` component. It includes data fetching with `useLandingSearch` and SEO setup with `useCmsHead`.

```vue
<script setup lang="ts">
import { useLandingSearch } from "#imports";
import type { Schemas } from "#shopware";

const props = defineProps<{
  navigationId: string;
}>();

const { search } = useLandingSearch();

const { data: landingResponse } = await useAsyncData(
  "cmsLanding" + props.navigationId,
  async () => {
    const landingPage = await search(props.navigationId, {
      withCmsAssociations: true,
    });
    return landingPage;
  },
);

if (typeof landingResponse?.value !== null) {
  const landingPage = landingResponse as Ref<Schemas["LandingPage"]>;
  useCmsHead(landingPage, { mainShopTitle: "Shopware Frontends Demo Store" });
}
</script>

<template>
  <LayoutBreadcrumbs />
  <CmsPage v-if="landingResponse?.cmsPage" :content="landingResponse.cmsPage" />
</template>
```

--------------------------------

### Run Shopware Frontends Documentation (pnpm)

Source: https://github.com/shopware/frontends/blob/main/README.md

Execute this pnpm command to start the documentation development server, allowing you to work on and view the project's documentation locally.

```sh
pnpm run dev --filter='docs'
```

--------------------------------

### Install @shopware/api-gen CLI

Source: https://github.com/shopware/frontends/blob/main/packages/api-gen/README.md

Install the `@shopware/api-gen` CLI development dependency using various package managers.

```sh
# ✨ Auto-detect
npx nypm install -D @shopware/api-gen
```

```sh
# npm
npm install -D @shopware/api-gen
```

```sh
# yarn
yarn add -D @shopware/api-gen
```

```sh
# pnpm
pnpm install -D @shopware/api-gen
```

```sh
# bun
bun install -D @shopware/api-gen
```

```sh
# deno
deno install --dev @shopware/api-gen
```

--------------------------------

### Run vue-demo-store development server

Source: https://github.com/shopware/frontends/blob/main/AGENTS.md

Start the development server for the vue-demo-store template from the project root or standalone directory. Use the root command for monorepo context or the standalone commands for isolated development.

```bash
# From root
pnpm run dev --filter=vue-demo-store
```

```bash
# Or standalone
cd templates/vue-demo-store
pnpm i
pnpm dev
```

--------------------------------

### Install Dependencies with Multiple Package Managers

Source: https://github.com/shopware/frontends/blob/main/examples/i18n-multi-domain/README.md

Install project dependencies using npm, pnpm, yarn, or bun. Run one of these commands based on your preferred package manager.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn install
```

```bash
bun install
```

--------------------------------

### Run Playground Project in Development Mode

Source: https://github.com/shopware/frontends/blob/main/examples/multi-sales-channel/README.md

Execute this command to start a Nuxt 3 playground project with the multi-sales-channel plugin configured for development.

```bash
# Run a playground (nuxt 3) project in dev mode
pnpm dev
```

--------------------------------

### Compile and Hot-Reload for Development (npm)

Source: https://github.com/shopware/frontends/blob/main/examples/blank-playground/README.md

Starts the development server, compiling and hot-reloading the application for active development.

```sh
npm run dev
```

--------------------------------

### Install Shopware Composables and API Client

Source: https://github.com/shopware/frontends/blob/main/packages/composables/README.md

Add the necessary Shopware packages to your project using your preferred package manager. This includes `@shopware/composables`, `@shopware/api-client`, and `@shopware/api-gen`.

```bash
pnpm add @shopware/composables @shopware/api-client @shopware/api-gen
```

```bash
yarn add @shopware/composables @shopware/api-client @shopware/api-gen
```

```bash
npm i @shopware/composables @shopware/api-client @shopware/api-gen
```

--------------------------------

### Run Development Server with Hot-Reload

Source: https://github.com/shopware/frontends/blob/main/examples/express-checkout/README.md

Start the development server with hot-reload enabled for local development and testing.

```shell
pnpm run dev
```

--------------------------------

### Install Storyblok Nuxt Module

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/integrations/cms/storyblok.md

Add the Storyblok Nuxt module to your project using `nuxi`.

```bash
pnpx nuxi@latest module add storyblok
```

--------------------------------

### Install Braintree Web Drop-in Dependency

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/integrations/payments/braintree.md

Install the necessary Braintree Web Drop-in library using npm to enable client-side payment UI functionality.

```bash
npm install braintree-web-drop-in
```

--------------------------------

### Nuxt Config for vue-starter-template-extended

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/AGENTS.md

Example `nuxt.config.ts` demonstrating how to extend an existing template (like `vue-starter-template`) to inherit its configurations, including the CMS base layer.

```typescript
// templates/vue-starter-template-extended/nuxt.config.ts
export default defineNuxtConfig({
  extends: ["../vue-starter-template"],  // Inherits cms-base-layer
  // ...minimal customizations
});
```

--------------------------------

### Nuxt Config for vue-starter-template

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/AGENTS.md

Example `nuxt.config.ts` from the `vue-starter-template` showing how to extend the CMS base layer and composables layer.

```typescript
// templates/vue-starter-template/nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
  // ...configuration
});
```

--------------------------------

### Install Strapi Nuxt module

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/integrations/cms/strapi.md

Use this command to add the Strapi Nuxt module as a development dependency to your project.

```cmd
pnpm add -D @nuxtjs/strapi
```

--------------------------------

### Package Management Commands

Source: https://github.com/shopware/frontends/blob/main/AGENTS.md

pnpm and Turbo commands for installing dependencies and building all packages or specific packages with filtering.

```bash
pnpm i                                    # Install dependencies
pnpm run build                            # Build all packages
pnpm run build --filter='./packages/*'   # Build only packages
pnpm run build --filter=api-client       # Build specific package
```

--------------------------------

### Install Vite basic-ssl plugin

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/troubleshooting.md

Add the `@vitejs/plugin-basic-ssl` development dependency to your project using pnpm to enable basic SSL for local development.

```bash
pnpm add -D @vitejs/plugin-basic-ssl
```

--------------------------------

### Configure API-Specific Patches and Rules

Source: https://github.com/shopware/frontends/blob/main/packages/api-gen/README.md

Example `api-gen.config.json` showing how to define separate patch files and rules for Store API and Admin API.

```json
{
  "$schema": "./node_modules/@shopware/api-gen/api-gen.schema.json",
  "store-api": {
    "patches": [
      "storeApiSchema.overrides.json",
      "./api-types/myStoreApiPatches.json"
    ],
    "rules": ["COMPONENTS_API_ALIAS"]
  },
  "admin-api": {
    "patches": ["adminApiSchema.overrides.json"],
    "rules": ["COMPONENTS_API_ALIAS"]
  }
}
```

--------------------------------

### Example CalculatedPrice Object Structure

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/e-commerce/prices.md

Illustrates the structure and typical values of a Shopware `CalculatedPrice` object, detailing fields like unitPrice, totalPrice, and tax information.

```json
{
  "unitPrice": 58,
  "quantity": 1,
  "totalPrice": 58,
  "calculatedTaxes": [
    {
      "tax": 9.26,
      "taxRate": 19,
      "price": 58,
      "apiAlias": "cart_tax_calculated"
    }
  ],
  "taxRules": [
    {
      "taxRate": 19,
      "percentage": 100,
      "apiAlias": "cart_tax_rule"
    }
  ],
  "referencePrice": null,
  "listPrice": {
    "price": 83.3,
    "discount": -25.3,
    "percentage": 30.37,
    "apiAlias": "cart_list_price"
  },
  "regulationPrice": {
    "price": 54,
    "apiAlias": "cart_regulation_price"
  },
  "apiAlias": "calculated_price"
}
```

--------------------------------

### Preview production build

Source: https://github.com/shopware/frontends/blob/main/templates/vue-starter-template-extended/README.md

Launches a local server to preview the production-ready build.

```bash
pnpm preview
```

--------------------------------

### Prop Drilling Example: Parent Component

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/framework/composables/context-composables.md

Shows a parent component passing a product prop, illustrating the start of prop drilling.

```vue
<!-- Product.vue -->
<script setup lang="ts">
const product = searchProduct();
</script>
<template>
  <div>
    <ProductConfigurator :product="product" />
  </div>
</template>
```

--------------------------------

### Set up and run the Vue Demo Store Template

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/demo-store-template.md

Use these commands to initialize and run the Vue Demo Store Template manually in a new directory.

```bash
npx tiged shopware/frontends/templates/vue-demo-store demo-store && cd demo-store
npm i && npm run dev
```

--------------------------------

### Install Storyblok Vue Dependency

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/resources/integrations/cms/storyblok.md

Install the `@storyblok/vue` package as a development dependency.

```bash
pnpm add @storyblok/vue -D
```

--------------------------------

### Preview the production build locally

Source: https://github.com/shopware/frontends/blob/main/examples/maintenance-allowlisting/README.md

After building, use this command to serve and test the production-ready application locally before deployment.

```bash
# npm
npm run preview
```

```bash
# pnpm
pnpm preview
```

```bash
# yarn
yarn preview
```

```bash
# bun
bun run preview
```

--------------------------------

### Install js-cookie with npm

Source: https://github.com/shopware/frontends/blob/main/packages/composables/README.md

Install the `js-cookie` library, which is used for managing browser cookies for the API client context.

```bash
npm i js-cookie
```

--------------------------------

### Locally preview the production build

Source: https://github.com/shopware/frontends/blob/main/examples/b2b-employee-management/README.md

Serves the previously built production application locally for testing.

```bash
# npm
npm run preview
```

```bash
# pnpm
pnpm run preview
```

```bash
# yarn
yarn preview
```

```bash
# bun
bun run preview
```

--------------------------------

### Build Application for Production

Source: https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/README.md

Execute one of these commands to build the application for deployment in a production environment.

```bash
pnpm build
```

```bash
npm run build
```

```bash
yarn build
```

--------------------------------

### Example ListingFilter Object for Properties

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/e-commerce/product-listing.md

This TypeScript example illustrates the structure of a `ListingFilter` object for a 'properties' type filter, showing how options are represented.

```ts
const ColorFilter: ListingFiler = {
  name: "Color",
  // other properties omitted
  options: [
    {
      id: "yellow-id",
      name: "Yellow",
      // other props omitted
    },
    {
      id: "green-id",
      name: "Gellow",
      // other props omitted
    },
  ],
};
```

--------------------------------

### Build Application for Production

Source: https://github.com/shopware/frontends/blob/main/examples/i18n-multi-domain/README.md

Build the application for production deployment using your preferred package manager.

```bash
npm run build
```

```bash
pnpm build
```

```bash
yarn build
```

```bash
bun run build
```

--------------------------------

### Install @shopware/cms-base-layer npm package

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/README.md

Install the `@shopware/cms-base-layer` package using various package managers. This package provides CMS components for Shopware Shopping Experiences.

```shell
npx nypm install -D @shopware/cms-base-layer
```

```shell
npm install -D @shopware/cms-base-layer
```

```shell
yarn add -D @shopware/cms-base-layer
```

```shell
pnpm install -D @shopware/cms-base-layer
```

```shell
bun install -D @shopware/cms-base-layer
```

```shell
deno install --dev @shopware/cms-base-layer
```

--------------------------------

### Vue Starter Template Directory Structure

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/installation.md

Illustrates the directory structure of the Vue Starter Template, following Nuxt 4.x conventions, with components organized by usage context.

```json
my-store/
├─ app/
│  ├─ components/
│  │  ├─ layout/       /* header, footer, account menu etc. */
│  │  ├─ checkout/     /* cart items, cart overview */
│  │  ├─ account/      /* order history, account settings */
│  │  ├─ product/      /* product components */
│  │  ├─ form/         /* form components */
│  │  ├─ shared/       /* modals, notifications */
│  │  ├─ ...
│  ├─ composables/     /* auto-imported composables */
│  ├─ layouts/
│  │  ├─ checkout.vue  /* minimal layout without navigation and footer */
│  │  ├─ default.vue   /* default layout with navigation and footer */
│  ├─ pages/
│  │  ├─ checkout/     /* checkout pages */
│  │  ├─ account/      /* user account pages */
│  │  ├─ [...all].vue  /* catch-all route for CMS pages */
│  │  ├─ ...
│  ├─ utils/           /* utility functions */
│  ├─ app.config.ts    /* app configuration */
│  ├─ app.vue          /* app root component */
├─ i18n/               /* internationalization */
├─ public/             /* static assets */
├─ server/             /* server-side code */
├─ nuxt.config.ts      /* Nuxt configuration */
├─ package.json
├─ tsconfig.json
```

--------------------------------

### Install CMS base layer package

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/custom-vue-project.md

Install the @shopware/cms-base-layer package as a dev dependency to access ready-to-use CMS components. Multiple package managers are supported.

```bash
# ✨ Auto-detect
npx nypm install -D @shopware/cms-base-layer
```

```bash
# npm
npm install -D @shopware/cms-base-layer
```

```bash
# yarn
yarn add -D @shopware/cms-base-layer
```

```bash
# pnpm
pnpm install -D @shopware/cms-base-layer
```

```bash
# bun
bun install -D @shopware/cms-base-layer
```

```bash
# deno
deno install --dev @shopware/cms-base-layer
```

--------------------------------

### Initialize API client and Shopware instance

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/custom-vue-project.md

Create the API client instance and Shopware context within the plugin install method, retrieving context tokens and language IDs from cookies for session persistence.

```typescript
const cookieContextToken = Cookies.get("sw-context-token");
const cookieLanguageId = Cookies.get("sw-language-id");

const contextToken = ref(cookieContextToken);
const languageId = ref(cookieLanguageId);

const instance = createInstance({
  endpoint: options.endpoint,
  accessToken: options.accessToken,
  timeout: options.shopwareApiClient?.timeout || 5000,
  contextToken: contextToken.value,
  languageId: languageId.value,
});
```

--------------------------------

### Install cookie helper for session persistence

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/custom-vue-project.md

Install js-cookie to manage context tokens and language IDs across page reloads for maintaining session state.

```bash
pnpm add js-cookie
```

--------------------------------

### Scaffold Vue Starter Templates

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/vue-starter-template-extended.md

Use `npx tiged` to scaffold both the base Vue Starter Template and the extended Lumora store template side-by-side into your local environment.

```bash
npx tiged shopware/frontends/templates/vue-starter-template vue-starter-template
npx tiged shopware/frontends/templates/vue-starter-template-extended lumora-store
```

--------------------------------

### CmsGenericBlock Example Usage in Vue

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/public/cms/CmsGenericBlock.md

This example demonstrates how to use `CmsGenericBlock` within a Vue component to render CMS blocks dynamically, applying layout configurations.

```vue
<script setup lang="ts">
import type { CmsSectionDefault } from "@shopware/composables";
import { getCmsLayoutConfiguration } from "@shopware/helpers";

const props = defineProps<{
  content: CmsSectionDefault;
}>();

const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
</script>

<template>
  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
    <CmsGenericBlock
      v-for="cmsBlock in content.blocks"
      class="overflow-auto"
      :key="cmsBlock.id"
      :content="cmsBlock"
    />
  </div>
</template>
```

--------------------------------

### Install cms-base-layer package

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/framework/shopping-experiences.md

Add the @shopware/cms-base-layer package to your project dependencies.

```bash
npm install -D @shopware/cms-base-layer
```

--------------------------------

### Build application for production

Source: https://github.com/shopware/frontends/blob/main/templates/vue-starter-template-extended/README.md

Compiles the application for a production deployment.

```bash
pnpm build
```

--------------------------------

### Build the application for production

Source: https://github.com/shopware/frontends/blob/main/examples/b2b-employee-management/README.md

Generates an optimized production-ready build of the application.

```bash
# npm
npm run build
```

```bash
# pnpm
pnpm run build
```

```bash
# yarn
yarn build
```

```bash
# bun
bun run build
```

--------------------------------

### Build for Production

Source: https://github.com/shopware/frontends/blob/main/examples/express-checkout/README.md

Compile and minify the project for production deployment.

```shell
pnpm run build
```

--------------------------------

### Create the component file structure

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/cms/missing-component.md

Illustrates the recommended directory structure for placing a new CMS component file within your project's `components/` directory.

```text
your-project/
└── components/
    └── {{ componentName }}.vue   ← create this
```

--------------------------------

### Basic Usage of Shopware Composables

Source: https://github.com/shopware/frontends/blob/main/packages/composables/README.md

Demonstrates how to use `useUser` and `useSessionContext` composables within a Vue 3 setup script. It shows fetching session context and triggering a user login action.

```html
<script setup>
    import { useUser, useSessionContext } from "@shopware/composables/dist";

    const { login } = useUser();
    const { refreshSessionContext, sessionContext } = useSessionContext();
    refreshSessionContext();
</script>
<template>
    <pre>{{ sessionContext }}</pre>
    <button @click="login({
        username: "some-user",
        password: "secret-passwd"
    })">
        Try to login!
    </button>
</template>
```

--------------------------------

### Configure customer login credentials

Source: https://github.com/shopware/frontends/blob/main/examples/commercial-quick-order/README.md

Provide test customer login email and password in the .env file for authentication.

```env
VITE_TEST_LOGIN_EMAIL="myb2bcustomer@shopware.com"
VITE_TEST_LOGIN_PASSWORD="!@#verysecretpasswd"
```

--------------------------------

### Build and Preview Nuxt Application for Production

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/getting-started/templates/vue-starter-template-extended.md

Commands to build your Nuxt application for production and preview the generated output locally.

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

--------------------------------

### GET /customer/wishlist/{productId}

Source: https://github.com/shopware/frontends/blob/main/packages/api-gen/tests/snapshots-transformOpenApiTypes/requestParams.operationsMap.txt

Retrieves a customer's wishlist item, optionally filtering by a list of product IDs.

```APIDOC
## GET /customer/wishlist/{productId}\n\n### Description\nRetrieves a customer's wishlist item, optionally filtering by a list of product IDs.\n\n### Method\nGET\n\n### Endpoint\n/customer/wishlist/{productId}\n\n### Parameters\n#### Path Parameters\n- **productId** (string) - Required - Identifier of the product to be added.\n\n#### Query Parameters\n- **ids** (string[]) - Optional - A list of product identifiers.\n\n#### Headers\n- **sw-include-seo-urls** (boolean) - Optional - Instructs Shopware to try and resolve SEO URLs for the given navigation item\n\n### Response\n#### Success Response (200)\n- **success** (boolean) - Indicates if the operation was successful.\n\n#### Response Example\n{\n  "success": true\n}
```

--------------------------------

### Install Shopware Nuxt Module

Source: https://github.com/shopware/frontends/blob/main/packages/nuxt-module/README.md

Add the `@shopware/nuxt-module` package to your project using pnpm, yarn, or npm as a development dependency.

```bash
pnpm add -D @shopware/nuxt-module
```

```bash
yarn add --dev @shopware/nuxt-module
```

```bash
npm i @shopware/nuxt-module --save-dev
```

--------------------------------

### Build and Development Commands

Source: https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/AGENTS.md

Run build, development (stub mode with hot reload), tests, type checking, and linting from the package directory.

```bash
# From package directory
pnpm run build

# Stub mode for development (hot reload)
pnpm run dev
```

```bash
pnpm run test        # Run tests
pnpm run test:watch  # Watch mode
```

```bash
pnpm run typecheck
```

```bash
pnpm run lint        # Check
pnpm run lint:fix    # Fix
```

--------------------------------

### Prop Drilling Example: Child Component

Source: https://github.com/shopware/frontends/blob/main/apps/docs/src/framework/composables/context-composables.md

Illustrates a child component consuming a product prop that has been passed down through multiple levels.

```vue
<!-- ProductPrice.vue -->
<script setup lang="ts">
const props = defineProps<{
  product: Product;
}>();
</script>
<template>
  <div>
    {{ getFormattedPrice(product.price) }}
  </div>
</template>
```

--------------------------------

### LoadSchema Command Options

Source: https://github.com/shopware/frontends/blob/main/packages/api-gen/README.md

Load OpenAPI specification from a Shopware instance and save to JSON file. Requires .env file with authentication credentials.

```bash
pnpx @shopware/api-gen loadSchema --help

# load schema from store API
pnpx @shopware/api-gen loadSchema --apiType=store

# load schema from admin API
pnpx @shopware/api-gen loadSchema --apiType=admin
```

--------------------------------

### Type System Generic Parameter Example

Source: https://github.com/shopware/frontends/blob/main/packages/api-client/AGENTS.md

Demonstrates how the `operations` generic parameter provides end-to-end type safety for `invoke()` calls.

```typescript
createAPIClient<operations>()  →  client.invoke("operationId method /path", body)
                                             ↑ typed by operations key
```

--------------------------------

### Quick commands reference for Shopware Frontends

Source: https://github.com/shopware/frontends/blob/main/AGENTS.md

Essential pnpm commands for development, building, testing, and deployment workflows in the monorepo. Includes filtering for specific packages and running demo/documentation servers.

```bash
# Install
pnpm i

# Build everything
pnpm run build

# Build packages only
pnpm run build --filter='./packages/*'

# Build specific package
pnpm run build --filter=api-client

# Run demo store
pnpm run dev --filter=vue-demo-store

# Run docs
pnpm run dev --filter=docs

# Lint and fix
pnpm run lint:fix && pnpm format

# Test
pnpm run test

# Type check
pnpm run typecheck

# Create changeset
pnpm changeset
```

--------------------------------

### Environment Configuration for Schema Loading

Source: https://github.com/shopware/frontends/blob/main/packages/api-gen/README.md

Configure .env file with Shopware instance URL and authentication credentials. Admin API supports both password grant and client credentials grant methods.

```bash
OPENAPI_JSON_URL="https://your-shop-instance.shopware.store"
## This one needed to fetch store API schema
OPENAPI_ACCESS_KEY="YOUR_STORE_API_ACCESS_KEY"

## Admin API authentication (choose one method):

## Option 1: Password grant (username/password)
SHOPWARE_ADMIN_USERNAME="my@username.com"
SHOPWARE_ADMIN_PASSWORD="my-password"

## Option 2: Client credentials grant (integration)
## Create an integration in Shopware Admin > Settings > System > Integrations
# SHOPWARE_ADMIN_CLIENT_ID="your-integration-client-id"
# SHOPWARE_ADMIN_CLIENT_SECRET="your-integration-secret"
```