diff --git a/.changeset/stale-files-learn.md b/.changeset/stale-files-learn.md new file mode 100644 index 000000000..fb5665b22 --- /dev/null +++ b/.changeset/stale-files-learn.md @@ -0,0 +1,5 @@ +--- +"@shopware-pwa/nuxt3-module": minor +--- + +Added possibility to use Nuxt config file for setting the API requests headers. Headers are added to each request SSR and CSR. diff --git a/packages/nuxt3-module/README.md b/packages/nuxt3-module/README.md index 185a3a3f9..fb948e35e 100644 --- a/packages/nuxt3-module/README.md +++ b/packages/nuxt3-module/README.md @@ -88,6 +88,32 @@ All composable functions are fully typed with TypeScript and they are registed g Internally, the module uses [API Client](https://npmjs.com/package/@shopware/api-client) and [Composables](https://npmjs.com/package/@shopware-pwa/composables-next) packages, configured together to make everything working well. If you need to check how it's working on a different version of one of them, install a package locally in your project (to be installed and available in project's `package.json` file), then the Nuxt module will use yours. Keep in mind that the different configuration may lead to unexpected behavior. +## API Default Headers + +You can use Nuxt config to set the default API call headers. +More about Nuxt configuration can be found [HERE](https://nuxt.com/docs/getting-started/configuration). + +> **_NOTE:_** By default, the values in `runtimeConfig` are only available on the server-side. However, keys within `runtimeConfig.public` are also accessible on the client-side. [MORE](https://nuxt.com/docs/getting-started/configuration#environment-variables-and-private-tokens) + +```json +{ + "runtimeConfig": { + "public": { + "apiClientConfig": { + "headers": { + "global-heder-example": "global-header-example-value" + } + } + }, + "apiClientConfig": { + "headers": { + "ssr-heder-example": "ssr-header-example-value" + } + } + } +} +``` + ## Links - [📘 Documentation](https://frontends.shopware.com) diff --git a/packages/nuxt3-module/plugin.ts b/packages/nuxt3-module/plugin.ts index ed39d8910..99a4eca5d 100644 --- a/packages/nuxt3-module/plugin.ts +++ b/packages/nuxt3-module/plugin.ts @@ -11,6 +11,7 @@ import { createAPIClient } from "@shopware/api-client"; import { getCookie } from "h3"; import { isMaintenanceMode } from "@shopware-pwa/helpers-next"; import type { ApiClient } from "#shopware"; +import { defu } from "defu"; declare module "#app" { interface NuxtApp { @@ -62,6 +63,10 @@ export default defineNuxtPlugin((NuxtApp) => { contextToken: shouldUseSessionContextInServerRender ? contextTokenFromCookie : "", + defaultHeaders: defu( + runtimeConfig.apiClientConfig?.headers, + runtimeConfig.public?.apiClientConfig?.headers, + ), }); apiClient.hook("onContextChanged", (newContextToken) => { @@ -85,7 +90,6 @@ export default defineNuxtPlugin((NuxtApp) => { }); NuxtApp.vueApp.provide("apiClient", apiClient); - // Shopware context const shopwareContext = createShopwareContext(NuxtApp.vueApp, { enableDevtools: true, diff --git a/packages/nuxt3-module/src/index.ts b/packages/nuxt3-module/src/index.ts index f08d48aa4..25cb09da9 100644 --- a/packages/nuxt3-module/src/index.ts +++ b/packages/nuxt3-module/src/index.ts @@ -95,14 +95,21 @@ declare module "@nuxt/schema" { interface NuxtOptions { shopware?: ShopwareNuxtOptions; } + interface ApiClientConfig { + headers?: { + [key: string]: string; + }; + } interface RuntimeConfig { shopware?: Pick< ShopwareNuxtOptions, "endpoint" | "shopwareEndpoint" | "useUserContextInSSR" >; + apiClientConfig?: ApiClientConfig; } interface PublicRuntimeConfig { shopware: ShopwareNuxtOptions; + apiClientConfig?: ApiClientConfig; } } diff --git a/templates/vue-demo-store/nuxt.config.ts b/templates/vue-demo-store/nuxt.config.ts index a4fbc5f95..db3cd765e 100644 --- a/templates/vue-demo-store/nuxt.config.ts +++ b/templates/vue-demo-store/nuxt.config.ts @@ -16,8 +16,25 @@ export default defineNuxtConfig({ // endpoint: "https://demo-frontends.shopware.store/store-api/", // accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW", // devStorefrontUrl: "", + /** + * Example for API Client configuration. + */ + // apiClientConfig: { + // headers: { + // "global-heder-example": "global-header-example-value", + // }, + // }, // }, + /** + * Example for API Client configuration + * + */ + // apiClientConfig: { + // headers: { + // "ssr-heder-example": "ssr-header-example-value", + // }, + // }, /** * More about this feature you can find here: https://frontends.shopware.com/getting-started/features/broadcasting.html */