*This article was modeled from the current Adobe React SPA documentation.
Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). This tutorial walks through the implementation of a Vue application for a fictitious lifestyle brand, the WKND. The Vue app will be developed and designed to be deployed with AEM’s SPA Editor, which maps Vue components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM.
The goal for this multi-part tutorial is to teach a developer how to implement a Vue application to work with the SPA Editor feature of AEM. In a real-world scenario the development activities are broken down by persona, often involving a Front End developer and a Back End developer. We believe it is beneficial for any developer who will be involved in an AEM SPA Editor project to complete this tutorial.
The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6.5.4+ and AEM 6.4.8+. The SPA is implemented using:
- Maven AEM Project Archetype
- Mavice Maven AEM Project Archetype
- AEM SPA Editor
- Core Components
- Vue JS
- Vue CLI
Estimate 1-2 hours to get through each part of the tutorial.
All of the tutorial code can be found on GitHub.
Before starting this tutorial, you’ll need the following:
- Basic familiarity with Vue
- AEM as a Cloud Service SDK, AEM 6.5.4+ or AEM 6.4.8+
- Apache Maven (3.3.9 or newer)
- Node.js and npm
While not required, it is beneficial to have a basic understanding of developing traditional AEM Sites components.
Local Development Environment
A local development environment is necessary to complete this tutorial. Screenshots and video are captured using the AEM as a Cloud Service SDK running on a Mac OS environment with Visual Studio Code as the IDE. Commands and code should be independent of the local operating system, unless otherwise noted.NOTE
New to AEM as a Cloud Service? Check out the following guide to setting up a local development environment using the AEM as a Cloud Service SDK.
New to AEM 6.5? Check out the following guide to setting up a local development environment.
What are you waiting for?! Start the tutorial by navigating to the SPA Editor Project chapter and learn how to generate a SPA Editor enabled project using the AEM Project Archetype.
The project code for this tutorial was built for AEM as a Cloud Service. In order to make the project code backward compatible for 6.5.4+ and 6.4.8+ several modifications have been made to the tutorial’s POM files.
The UberJar v6.4.4 has been included as a dependency:
<!-- Adobe AEM 6.x Dependencies --> <dependency> <groupId>com.adobe.aem</groupId> <artifactId>uber-jar</artifactId> <version>6.4.4</version> <classifier>apis</classifier> <scope>provided</scope> </dependency>
An additional Maven profile, named
classic has been added to modify the build to target AEM 6.x environments:
<!-- AEM 6.x Profile to include Core Components--> <profile> <id>classic</id> <activation> <activeByDefault>false</activeByDefault> </activation> <build> ... </profile>
classic profile is disabled by default. If following the tutorial with AEM 6.x please add the
classic profile whenever instructed to perform a Maven build, i.e:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
When generating a new project for an AEM implementation always use the latest version of the AEM Project Archetype and update the
aemVersion to target your intended version of AEM.