The Shopware 6 Administration comes with a bunch of tailored Vue components, already accessible in all of your templates via the
component registry. This guide will show you how you can use Shopware-made components in your templates, if you want to learn more about the
component registry and how you can register your own components to it have a look at the corresponding guide
All Shopware 6 Administration components can be found in the Component Library. There you can see what each of the components does and looks like, it also shows you what props they can work with and which slots they have.
As mentioned before in the introduction, all components used in the Shopware 6 Administration are first registered to the
component registry. This
component registry is just a map of all components, which then get registered to Vue during the
Administrations boot process. Since all of the components are registered as global
Vue components, they are accessible in all templates of the Administration.
Using base components in your own administration templates is rather simple. In the example below we will use the
sw-text-field in our template, which simply renders a
text input tag, but also supports some fancy functionality, like inheritance, etc:
That's basically it. To continue building beautiful custom components, learn how to write templates and how to include them in your components here