Skip to content
On this page

Vite Plugin

Evolving AEM Vite has always and is a primary goal of the project. To ensure AEM Vite keeps up with ever-changing updates and feature inclusions within the Vite ecosystem we are providing a plugin that solves many challenges.

Solving Challenges

The Java side of AEM Vite works quite well in small doses but it has some flaws which makes maintaining the replacement logic complex and time-consuming. Alongside this you would also need to refresh the page 2-to-3 times before AEM Vite would kick in due to how the internal HTTP requests are handled.

In addition to these points, A Vite specific plugin also aims to bring some boilerplate with it which will ultimately remove the need for complex configurations across projects.


Getting started is quick and simple. Run the below command to install the Vite AEM plugin.

npm install --save-dev @aem-vite/vite-aem-plugin
# or; yarn
yarn add -D @aem-vite/vite-aem-plugin
# or; pnpm
pnpm add -D @aem-vite/vite-aem-plugin

Using The Plugin

This step couldn't be more simple. Run either the serve or build command for Vite and everything will work like magic.

vite serve
# or
vite build

By default @aem-vite/vite-aem-plugin enforces strict port mode when using the Vite DevServer. This will automatically jump to the next available port if 3000 is unavailable.




import { viteForAem } from '@aem-vite/vite-aem-plugin';

export default defineConfig(() => ({
  plugins: [
    // ... all other plugins
      contentPaths: ['<content path(s)>'],
      publicPath: '/etc.clientlibs/<project>/clientlibs/clientlib-site',


Please refer to the vite configuration and dynamic imports documentation for more information about the publicPath option.

Plugin options

Property NameTypeRequired
Set the hostname and port of your AEM instance.
A list of content paths (excluding /content/) to match ClientLib paths in.
The AEM proxy path to your ClientLib directory.
Enables the @aem-vite/import-rewriter plugin

Note for rewriterOptions configuration

The publicPath option is automatically forwarded onto the import rewriter from @aem-vite/vite-aem-plugin.

Content path examples

The following are example paths in AEM:

  • /content/<project_one>/en/au
  • /content/<project_one>/en/us
  • /content/<project_one>/en/es
  • /content/<project_two>/en/us/support

There are two ways that path matching is applied:

  1. Partially using the root content node name
  2. Partially using a path segment below the root node

To match only the US path in project one and everything in Project Two we can use the following list.

  contentPaths: [

Slashes in paths

Adding slashes to the start or end of these paths will cause in the proxy matcher to fail and respond with 404 page served by Vite.

React Support

Whenever the @vitejs/plugin-react plugin is detected, the AEM Vite plugin will automatically inject the React fast refresh script.

Apache 2.0 Licensed. Vite wording and logos are property of Evan You. Adobe and AEM wording and logos are property of Adobe Inc.