shopware/frontends - composables-next
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.
👉 Composables Reference
Features
createShopwareContext
method to create a Vue 3 plugin to install- State management
- Logic for UI
- Communication with Store-API via api-client package
Setup
Install npm packages (composables & api-client):
pnpm add @shopware-pwa/composables-next @shopware-pwa/api-client
yarn add @shopware-pwa/composables-next @shopware-pwa/api-client
npm i @shopware-pwa/composables-next @shopware-pwa/api-client
Initialize the api-client instance:
import { createInstance } from "@shopware-pwa/api-client";
const apiInstance = createInstance({
endpoint: "https://your-api-instance.com",
accessToken: "your-sales-channel-access-token",
});
Now, we can create a Vue 3 plugin to install a Shopware context in an app:
const shopwareContext = createShopwareContext(app, {
apiInstance,
devStorefrontUrl: "https://your-sales-channel-configured-domain.com",
});
app.use(shopwareContext);
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:
<script setup>
import { useUser, useSessionContext } from "@shopware-pwa/composables-next/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>
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:
pnpm add js-cookie
yarn add js-cookie
npm i js-cookie
Let's get back to the step where the api-client
was initialized:
import { createInstance } from "@shopware-pwa/api-client";
import Cookies from "js-cookie";
const apiInstance = createInstance({
endpoint: "https://your-api-instance.com",
accessToken: "your-sales-channel-access-token",
contextToken: Cookies.get("sw-context-token"),
});
apiInstance.onConfigChange(({ config }) => {
Cookies.set("sw-context-token", config.contextToken || "", {
expires: 365,
path: "/",
sameSite: "lax",
});
});
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
Changelog
Full changelog for stable version is available here
Latest changes: 0.0.0-canary-20240605101452
Major Changes
Minor Changes
-
#840 823aa9b
Thanks @mdanilowicz! - Return componentNameToResolve
in resolveCmsComponent function
-
#529 4dce006
Thanks @mdanilowicz! - BREAKING: Use product ID instead of whole product object in useProductWishlist
composable
-
#535 bebae42
Thanks @mdanilowicz! - Fix country ID in session context
Add salesChannelCountryId
that represent sales channel default city ID
-
#933 04ac2ad
Thanks @mdanilowicz! - - Added checkPromotion
attribute to the orderAssociations
- Added
statusTechnicalName
property to the useOrderDetails
composable - Added
getPaymentMethods
method that allows change payment for existed order - Added
stateMachineState
association for loading orders
-
#703 7a3a92c
Thanks @mdanilowicz! - Add B2b quote management composable
Patch Changes
-
#569 f1b2a30
Thanks @itscark! - Fix only available shipping methods
-
#880 2ade07a
Thanks @mdanilowicz! - Adjust types in useProductSearch
composable
-
#873 99ad5e9
Thanks @mkucmus! - Add isStackable and isDigital computed properties
-
#705 8f0b468
Thanks @mdanilowicz! - Add missing addressId to the updateCustomerAddress
method
-
#524 6b54268
Thanks @BrocksiNet! - Added new composables (previously internal helpers of the cms-base
package): useCmsTranslations
, useUrlResolver
, useUrlResolver
-
Updated dependencies [1566f7a
, 782ef4d
, 9643e56
, 1583a7a
, 97d2859
, 864616f
, d60d062
, a92941e
, 487d991
, 89a97a4
, 864616f
, 97b5949
, 6664aa2
, 6b54268
]:
- @shopware/api-client@0.0.0-canary-20240605101452
- @shopware-pwa/helpers-next@0.0.0-canary-20240605101452