VVJ Core is the shared engine behind the ten Views Vanilla JavaScript modules — one copy of the PHP services, Twig helpers, JavaScript utilities and CSS foundation that every VVJ display format uses. It adds no Views format of its own. You install it because a VVJ pattern module requires it, and from version 2.x every one of them does.
What VVJ Core is, and what it is not
If you are new to the suite: a VVJ pattern module adds a new Format option to a Drupal View, turning an ordinary list of content into an interactive component — an accordion, a carousel, a slideshow, a set of tabs — using modern vanilla JavaScript with no jQuery.
VVJ Core provides none of those formats. It is the engine room. You will not find a settings page to visit or a block to place. You install it because something else needs it.
Why it exists
Before version 2, every VVJ module carried its own copy of the same PHP services, the same Twig helpers and the same JavaScript utilities. Ten modules meant ten copies of code that did identical work.
Version 2 centralises all of it. The practical consequences matter if you run more than one VVJ format on a site:
- Smaller downloads — the shared code is fetched once, not once per pattern.
- Faster security fixes — a fix lands in one place rather than needing ten releases.
- A consistent accessibility baseline — every VVJ component inherits the same keyboard handling and focus behaviour instead of each reimplementing it.
What it provides behind the scenes
- Shared Views Style plugin base
- Common admin form sections, validation, rendering and token documentation used by every VVJ format, so the configuration experience is the same whichever pattern you pick.
- Shared PHP services
- SVG sanitisation for custom icons,
[vvjX:field]token resolution, a responsive breakpoint registry, and unique ID generation. - Shared Twig filter
safe_html, for pre-sanitised markup inside VVJ templates.- Custom Element JavaScript base
- Lazy hydration, keyboard navigation helpers, deep-link support, focus trapping for modals, and clean teardown when Drupal replaces content over AJAX.
- Shared CSS foundation
- A design-token bridge, cascade-layer setup, reduced-motion support, and focus indicators built to a high contrast standard across every component.
The ten pattern modules
| Project | Views format | Page |
|---|---|---|
| VVJA | Accordion | Views Accordion |
| VVJB | Basic carousel | Views Carousel |
| VVJC | 3D carousel | Views 3D Carousel |
| VVJF | 3D flip box | Views 3D FlipBox |
| VVJH | Hero | Views Hero |
| VVJL | Lightbox | Views Lightbox |
| VVJP | Parallax | Views Parallax |
| VVJR | Reveal | Views Reveal |
| VVJS | Slideshow | Views Slideshow |
| VVJT | Tabs | Views Tabs |
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3 or later |
| Core modules | Views, Filter |
| Pattern module | At least one VVJ module at 2.x — Core on its own does nothing |
VVJ 2.x does not support Drupal 10. If you are on an older stack, stay on VVJ 1.x until you upgrade — and if that upgrade is the thing holding you back, it is work I do.
Installation
You do not normally install VVJ Core directly. Requiring a pattern module brings it along:
composer require drupal/vvja:^2.0Enable the pattern module and Core comes with it, because it is a required dependency:
drush en vvja -y
drush crInstalling by hand instead of with Composer? Extract VVJ Core to modules/contrib/vvj_core before extracting any pattern module. The shared JavaScript loads from that path, so the location is not arbitrary.
Typical workflow
- Require the pattern module you want; Composer installs VVJ Core with it.
- Enable it at Administration → Extend. Enabling the pattern enables Core automatically.
- Create or edit a View at Administration → Structure → Views.
- Set the display Format to the VVJ format you installed.
- Configure the options — animation, layout, icons, deep linking. They live on the View, not on a VVJ Core settings page.
- Save, then place the block or page as normal.
Extended documentation is available at /admin/help/vvj_core once the module is enabled.
Upgrading from VVJ 1.x
composer update drupal/vvja --with-dependencies
drush updb -y
drush crRepeat for each VVJ module you use. Composer downloads VVJ Core and the update hooks enable it for you.
No View configuration migration is required. Existing 1.x View configurations keep working on 2.0 — this is a drop-in upgrade, not a rebuild.
⚠ Upgrade all your VVJ modules to 2.x together. Do not run 1.x and 2.x pattern modules side by side on one site.
Common questions
Do I need to install VVJ Core separately?
No, if you use Composer — requiring any 2.x pattern module pulls it in. Yes, if you install by hand, and it must be extracted first.
Where are the settings?
There are none. Every option belongs to the pattern module and is configured on the View itself.
Does it work on Drupal 12?
Yes — ^11.3 || ^12. Drupal 10 is not supported by the 2.x line.
Will upgrading to 2.x break my existing Views?
No. Version 2.0 does not require migrating View configuration; 1.x configurations continue to work.
Can I use one VVJ module without the others?
Yes. Install only the patterns you need. Core is shared, so adding a second pattern later costs very little.
Building something with Views?
The VVJ suite is free and GPL-licensed, like all my contributed work. If you want help designing Views-driven components, upgrading a site to Drupal 11.3 or 12 so you can use the 2.x line, or building something custom on top, see my Drupal services or get in touch.
