Composables

WARNING

Single File Component (SFC) support for Administration extensions is experimental. It is available since Shopware 6.7.16.0. The APIs described on this page can still change without a deprecation. Try it out and tell us what you find, but do not ship an extension built on it to customers or to the Shopware Store until the API is declared stable (planned for 6.9).

All composables the Administration offers are experimental. Their names, options and return values can still change without a deprecation, so note which ones you rely on and tell us when one of them does not fit what you are building.

Override composables

Three of them are provided by the build in every .override.vue file. Like the macros, you never import them, and they exist only inside an override file. They are how an override reaches the component it overrides.

useSwPreviousState()

The state of the component you override

useSwProps()

That component's props, read only

useSwContext()

That component's emit, attrs, slots and expose

A base component needs none of them: it declares its own props with defineProps() and its own events with defineEmits().

Administration composables

Everything else is imported by name from the shopware:composables virtual module:

import { useNotification } from 'shopware:composables';

Each composable is also available as a default export of its own import path, named after it in camelCase (import useNotification from 'shopware:composables/useNotification').

Each of them is the Composition API side of a mixin. A mixin declared its own props and read them off this; a composable has neither, so whatever the mixin used to take from its host is passed in, and getters keep it reactive:

const { isBetween, betweenValue } = useRuleBetweenOperator({
    condition: () => props.condition,
    ensureValueExist: () => emit('ensure-value-exist'),
});

The mixins stay where they are, so an Options API component that has not been migrated keeps working.

Using mixins

The Options API side, and what each mixin does

Notifications

useNotification()

The notifications in the top right, and the system ones

useNotificationTranslation()

Translate and sanitize a notification for rendering

User settings

useUserSettings()

Read and write per-user config

Text and formatting

useInlineSnippet()

Resolve a snippet a merchant translated themselves

useTranslateWithFallback()

Translate against the active locale, then the fallback

usePlaceholder()

Read a translatable field the way the Administration displays it

useSalutation()

Format a salutation, with its fallback

Lists and forms

useListing()

Pagination, sorting, search and selection, kept in the route

usePosition()

The position integers of an entity collection

useValidation()

Run a value against the rules of the validation prop

Rule builder

useRuleContainer()

The state of a condition container in sw-condition-tree

useRuleBetweenOperator()

Render a between operator as a from/to pair

Media

useMediaGridListener()

Turn media grid events into a selection

useMediaSidebarModal()

The media sidebar's modals, and what they report

useVideoCover()

Assign and remove a video's poster image

CMS

useCmsState()

The CMS editor state a block or config panel works against

useCmsElement()

An element's resolved config, and the writes that change it