A repository containing core Vue.js components for AEM without the need for a complete SPA setup.
With so many ways to create Single Page Applications (SPAs) you may wonder, why the need to create this repository? The reasons for this approach and the motivation to create the current repository include:
- Wanting to create a simple component framework to add SPA capabilities to existing AEM pages
- Wanting to avoid the need for a complex and potentially over-engineered
ui.frontend
SPA application - Continuing to leverage core AEM features such as clientlibs, HTL, and component overlays.
- Combining portions of the Vue.js Single File Component (SFC) concepts with AEM component concepts
- Leveraging Vue.js client template capabilities
- Add the
ui.apps
module to your current application by building this project yourself, or visit the Adding as a Dependency section to retrieve the package via Github Packages. - Create your own application container by extending the Vue Container component. See sample.
- Create your own components by extending the Vue Component component. See sample.
- Add your container and components to any AEM Page and continue benefiting from default AEM features.
This project uses GitHub Packages to publish it's artifacts publicly via GitHub. To add this package as a dependency to your own Maven project, see the Authenticating to GitHub Packages documentation from GitHub and add the Maven dependency to your project:
<dependency>
<groupId>me.guillaumecle.aem</groupId>
<artifactId>vuecore.ui.apps</artifactId>
<version>1.0.0</version>
</dependency>
The main parts of the template are:
- ui.apps: contains the /apps (and /etc) parts of the project, ie JS&CSS clientlibs, components, and templates
- ui.samples: contains sample content using the components from the ui.apps
- ui.frontend: an optional dedicated front-end build mechanism (Webpack project)
- ui.tests: Selenium based UI tests
- all: a single content package that embeds all of the compiled modules (bundles and content packages) including any vendor dependencies
To build all the modules run in the project root directory the following command with Maven 3:
mvn clean install
To build all the modules and deploy the all
package to a local instance of AEM, run in the project root directory the following command:
mvn clean install -PautoInstallSinglePackage
Or to deploy it to a publish instance, run
mvn clean install -PautoInstallSinglePackagePublish
Or alternatively
mvn clean install -PautoInstallSinglePackage -Daem.port=4503
Or to deploy only a single content package, run in the sub-module directory (i.e ui.apps
)
mvn clean install -PautoInstallPackage
These tests will run against the UI layer of your AEM application using Selenium technology.
To run them locally:
mvn clean verify -Pui-tests-local-execution
This default command requires:
- an AEM author instance available at http://localhost:4502 (with the whole project built and deployed on it, see
How to build
section above) - Chrome browser installed at default location
Check README file in ui.tests
module for more details.
The frontend module is made available using an AEM ClientLib. When executing the NPM build script, the app is built and the aem-clientlib-generator
package takes the resulting build output and transforms it into such a ClientLib.
A ClientLib will consist of the following files and directories:
css/
: CSS files which can be requested in the HTMLcss.txt
(tells AEM the order and names of files incss/
so they can be merged)js/
: JavaScript files which can be requested in the HTMLjs.txt
(tells AEM the order and names of files injs/
so they can be mergedresources/
: Source maps, non-entrypoint code chunks (resulting from code splitting), static assets (e.g. icons), etc.
The project comes with the auto-public repository configured. To setup the repository in your Maven settings, refer to:
http://helpx.adobe.com/experience-manager/kb/SetUpTheAdobeMavenRepository.html
Apache License 2.0