Composables

WARNING

Single File Component (SFC) support for Administration extensions is experimental. It is currently only available on the trunk branch of shopware/shopware and is not part of any 6.7 release. The APIs described on this page can still change without a deprecation.

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

Override composables

Three of them are injected by the build like the macros are, so you never import them, and they exist only inside an .override.vue 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, one module per composable, named after it in kebab-case:

import { useNotification } from 'shopware:composables/use-notification';

Most of them are 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

useSnackbar()

Add and remove snackbars

Session and context

useSession()

The logged-in user, their privileges and the admin locale

useSystem()

The locales the Administration has registered

useContext()

The app and API context behind Shopware.Context

useUserSettings()

Read and write per-user config

useTheme()

The light or dark appearance, and the user's preference

useModuleIconColors()

The opt-in colored module icons

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

useCmsElementDeprecated()

What the codemod targets, and how to move off it

Block system

useBlockContext()

The registry behind sw-block