Shopware Frontends composables for Vue
npm install @shopware/composables



Set of Vue.js composition functions that can be used in any Vue.js project. They provide state management, UI logic and data fetching and are the base for all guides in our building section.
- createShopwareContext method to create a Vue 3 plugin to install
- State management
- Logic for UI
- Communication with Store-API via api-client package
Install npm packages (composables & api-client):
``bashUsing pnpm
pnpm add @shopware/composables @shopware/api-client @shopware/api-gen
Now generate your types ysing the CLI:
`bash
pnpm shopware-api-gen generate --apiType=store
`Initialize the api-client instance:
`js
import { createAPIClient } from "@shopware/api-client";
import type { operations } from "#shopware";export const apiClient = createAPIClient({
baseURL: "https://your-api-instance.com",
accessToken: "your-sales-channel-access-token",
});
// and then provide it in the Vue app
app.provide("apiClient", apiClient);
`Now, we can create a Vue 3 plugin to install a Shopware context in an app:
`js
import { createShopwareContext } from "@shopware/composables";// app variable in type of App
const shopwareContext = createShopwareContext(app, {
devStorefrontUrl: "https://your-sales-channel-configured-domain.com",
});
// register a plugin in a Vue instance
app.use(shopwareContext);
`Exclude
@shopware/composables package from pre-building process:`ts
// vite.config.js or .ts
...
optimizeDeps: {
exclude: ["@shopware/composables"],
},
...
`---
> The example does not provide the session handling and that means you need to do few additional steps if you need to keep your session after the page reload (see the chapter below with 🍪)
Basic usage
Now you can use any composable function in your setup function:
`html
{{ sessionContext }}
username: "some-user",
password: "secret-passwd"
})">
Try to login!
`Session persistence with 🍪
By default, the API-Client is stateless, but accepts an optional context token as a parameter while initializing an instance. In order to keep a session, install some cookie parser to work with cookies easier:
`bash
Using pnpm
pnpm add js-cookieUsing yarn
yarn add js-cookieUsing npm
npm i js-cookie
`Let's get back to the step where the
api-client was initialized:`ts [apiClient.ts]
import { createAPIClient } from "@shopware/api-client";
import Cookies from "js-cookie";
import type { operations } from "#shopware";const shopwareEndpoint = "https://demo-frontends.shopware.store/store-api";
export const apiClient = createAPIClient({
baseURL: shopwareEndpoint,
accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
contextToken: Cookies.get("sw-context-token"),
});
apiClient.hook("onContextChanged", (newContextToken) => {
Cookies.set("sw-context-token", newContextToken, {
expires: 365, // days
path: "/",
sameSite: "lax",
secure: shopwareEndpoint.startsWith("https://"),
});
});
`Thanks to this, the session will be kept to the corresponding
sw-context-token saved in the cookie, so it can be reachable also in the SSR. Check the example to see it in action:
TypeScript support
All composable functions are fully typed with TypeScript and they are registed globally in Nuxt.js application, so the type hinting will help you to work with all of them.
Links
#composable-frontend)Changelog
Full changelog for stable version is available here
$3
$3
- #2098
a44d871 Thanks @mdanilowicz! - Enhanced the useSyncWishlist composable by exposing the limit, products, and isLoading properties, allowing better control and monitoring of the wishlist state. Similarly, updated useWishlist to also expose limit, products, and isLoading properties for both local and synced wishlists, providing a consistent API and improved state handling for wishlist management.- #1997
e43d9b7 Thanks @mdanilowicz! - Added consts SUBSRIBE_KEY and UNSUBSCRIBE_KEY for newsletter status in useNewsletter composable- #1974
7fe2ef9 Thanks @mkucmus! - Use proper associations format within useDefaultOrderAssociations (no redundant nesting). Returned value is in type of
Schemas["Criteria"]['associations'] now:
`ts
const { loadOrders } = useCustomerOrders(); loadOrders({
// ... other parameters
associations: useDefaultOrderAssociations(),
});
`- #2176
c647baf Thanks @mkucmus! - - Add initialListing parameter to useListing composable for SSR data hydration
- Update createCategoryListingContext to accept initial listing data
- Maintain backward compatibility with existing implementations- #1959
c77daa6 Thanks @patzick! - Updated default types to Shopware 6.7$3
87771c3 Thanks @mkucmus! - add nested media entity association explicitly- #1985
2cbda25 Thanks @mkucmus! - Change isInWishlist property type to ComputedRef within useProductWishlist composable.- Updated dependencies [
22ff62e, 2cbda25, 70dcf95, 56cd178, e1fae3e, c647baf, c77daa6`]: