This module provides a Vue implementation for the containers in the AEM core components. This only works with the AEM SPA editor.
Current supported / exported components:
- Accordion
- Carousel
- Container
- Tabs
You can choose to import the entire library at once OR import components individually. The latter is useful if you want to only enable a few components and you want to save your javascript footprint.
import * as SpaCoreComponents from "aem-vue-3-core-wcm-components-spa";
const { CoreContainer, CoreContainerProperties } = SpaCoreComponents;
import {
CoreContainer,
CoreContainerProperties,
} from 'aem-vue-3-core-wcm-components-spa';
Now that you have the CoreContainer and CoreContainerProperties imported, you can use them in your project. The properties of the CoreContainer 1 on 1 correspond to the Sling Model Exporter (.model.json) output.
Note: There are some exceptions where some extra properties are added (mainly i18n labels) that are currently not present in the OOTB sling model exports. These can be added by the project itself with delegation. If they are not present, the default (English) values will be used.
import { CoreAccordion } from 'aem-vue-3-core-wcm-components-spa';
const CoreAccordionEditConfig = CoreAccordion.methods?.getEditConfig();
MapTo('my-project/components/accordion')(
CoreAccordion,
CoreAccordionEditConfig
);