@vue-storefront/nuxt
v6.2.0
Published
Alokai dedicated features for Nuxt
Downloads
13,024
Keywords
Readme
@vue-storefront/nuxt
Quick Setup
- Add
@vue-storefront/nuxt
dependency to your project
# Using pnpm
pnpm add -D @vue-storefront/nuxt
# Using yarn
yarn add --dev @vue-storefront/nuxt
# Using npm
npm install --save-dev @vue-storefront/nuxt
- Add
@vue-storefront/nuxt
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@vue-storefront/nuxt"],
});
- Configure the module
To configure the module, use vsf
key in the Nuxt configuration object and provide necessary information such as the Middleware instance address:
export default defineNuxtConfig({
modules: ["@vue-storefront/nuxt"],
vsf: {
middleware: {
apiUrl: "http://localhost:4000",
},
},
});
- Create SDK config file -
sdk.config.ts
in root directory of your project:
The defineSdkConfig
function is used for this purpose. The parameter for calling this function should be an anonymous function that receives an injected context from the module, containing:
- the
buildModule
function, - the middleware URL (
middlewareUrl
), - a function for retrieving the Cookie header with cookie values (
getCookieHeader
).
You should import all other SDK configuration components. See the example below illustrating the SDK configuration with Unified and Contentful modules.
import {
contentfulModule,
ContentfulModuleType,
} from "@vsf-enterprise/contentful-sdk";
import { unifiedModule } from "@vsf-enterprise/unified-sdk";
import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
export default defineSdkConfig(
({ buildModule, middlewareUrl, getCookieHeader }) => ({
unified: buildModule(unifiedModule<UnifiedApiExtension>, {
apiUrl: middlewareUrl + "/commerce",
requestOptions: {
headers: getCookieHeader,
},
}),
contentful: buildModule<ContentfulModuleType>(contentfulModule, {
apiUrl: middlewareUrl + "/cntf",
}),
}),
);
That's it! You can now use VueStorefront Module in your Nuxt app ✨