VVJ Core

VVJ Core is the shared foundation for the VVJ (Views Vanilla JavaScript) family from Flash Web Center - a set of Drupal Views display formats that turn list content into interactive front-end components (accordions, carousels, slideshows, tabs, hero banners, lightboxes, and more) using modern vanilla JavaScript (no jQuery).

If you are new to Drupal: a View is a configurable list of content (articles, products, team members, etc.). Each VVJ pattern module adds a new Format option on that View so visitors get rich interactions without custom coding. VVJ Core does not add a format by itself. It is the engine room that all VVJ pattern modules share starting with version 2.x.

What problem does it solve? Before v2, every VVJ module duplicated the same PHP services, Twig helpers, and JavaScript utilities. VVJ Core centralizes that code once - smaller downloads, faster security fixes, and a consistent accessibility baseline across the whole suite. When you install any VVJ pattern module v2.x, you also need VVJ Core on your site.

Features

VVJ Core is a dependency module, not an end-user feature. Site builders normally install it indirectly by installing one or more of the pattern modules below. 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.
• Shared PHP services - SVG sanitization for custom icons, [vvjX:field] token resolution, responsive breakpoint registry, and unique ID generation.
• Shared Twig filter - safe_html for pre-sanitized markup in VVJ templates.
• Custom Element JavaScript base - lazy hydration, keyboard navigation helpers, deep-link support, focus trapping for modals, and clean teardown on AJAX page changes.
• Shared CSS foundation - design-token bridge, cascade-layer setup, reduced-motion support, and AAA-leaning focus indicators for every VVJ component.
• v1 to v2 upgrade support - existing v1 View configurations keep working. A shared converter (normalize() / normalizeAll() on the upgrade audit) turns options saved in the v1 shape (numbers as strings, booleans as integers, options renamed during 1.x) into the v2 types, and each format module's update hook calls it. drush vvj:upgrade audits every View that uses a VVJ format and reports real drift.
• Optional AI sub-module (VVJ Core AI) - adds Build a VVJ view with AI to the Views list page (/admin/structure/views/vvj-ai). Choose a VVJ format, a content type, the fields or a view mode and how many items, and describe what you want; the AI names the view and picks its fields and sort from your site's own fields. The view is created as a block by default (a page on request), disabled so you can check it first, and an existing view is never edited. It requires the AI module and supports Drupal 11.3+ only (see Additional Requirements).

When would someone use this?

• You are installing or upgrading any VVJ pattern module v2.x (required dependency).
• You build agency sites that use several VVJ formats - one copy of VVJ Core serves accordion, slideshow, tabs, etc.
• You want vanilla JavaScript Views formats with a consistent accessibility and performance baseline.

VVJ pattern modules (install one or more - each requires VVJ Core v2):

Module Views format Project page VVJA Accordion drupal.org/project/vvja VVJB Basic carousel drupal.org/project/vvjb VVJC 3D carousel drupal.org/project/vvjc VVJF 3D flip box drupal.org/project/vvjf VVJH Hero drupal.org/project/vvjh VVJL Lightbox drupal.org/project/vvjl VVJP Parallax drupal.org/project/vvjp VVJR Reveal drupal.org/project/vvjr VVJS Slideshow drupal.org/project/vvjs VVJT Tabs drupal.org/project/vvjt

Post-Installation

VVJ Core alone does not add blocks, content types, or a settings page you need to visit. After installation, continue with the pattern module you care about (for example VVJA for accordions).

Typical workflow (example: accordion):

1. Install VVJ Core and VVJA (Composer installs both when you require VVJA v2).
2. Enable both modules at Administration → Extend (/admin/modules). Enabling VVJA also enables VVJ Core because it is a required dependency.
3. Create or edit a View at Administration → Structure → Views (/admin/structure/views).
4. On the View display, set Format to Views Vanilla JavaScript Accordion (or the format provided by whichever VVJ module you installed).
5. Configure format options on the View (animation, layout, icons, deep linking, etc.) - options are on the View UI, not a separate VVJ Core config page.
6. Save the View and place the block or page as usual.

Module help: Extended documentation is available at /admin/help/vvj_core after enabling the module.

Upgrading from VVJ 1.x (Drupal ^11.3 || ^12 and PHP 8.3+ only):

<pre class="codeblock"><code class="language-php">composer update drupal/vvja --with-dependencies
drush updb -y
drush cr

Replace vvja with each VVJ module you use. Composer downloads VVJ Core; update hooks enable it automatically. You do not migrate View configuration by hand: each format module's update hook converts saved v1-shaped options to the v2 shape (safe to run again). Use VVJ Core 2.0.1 or later and update it before running database updates, because the format modules' update hooks use the converter it provides. Upgrade all installed VVJ modules to 2.x together - do not mix 1.x and 2.x pattern modules on the same site.

Manual download users: extract VVJ Core to modules/contrib/vvj_core before extracting and enabling any VVJ pattern module v2.x.

Additional Requirements

• Drupal core: ^11.3 || ^12 (Drupal 11.3 or later, and Drupal 12). VVJ 2.x does not support Drupal 10 - stay on VVJ 1.x for older stacks.
• PHP: 8.3 or later.
• Drupal modules (required):
  • Views (included in Drupal core)
  • Filter (included in Drupal core)
• Pattern modules (required for practical use): at least one of the VVJ suite modules listed above (VVJA, VVJB, … VVJT) version 2.x. VVJ Core v2 is only used together with those modules.
• Composer (recommended): composer require drupal/vvja:^2.0.1 (or another pattern) automatically requires drupal/vvj_core:^2.0.1.
• Optional - VVJ Core AI sub-module (vvj_core_ai): requires the AI module (drupal/ai ^1.2) and an AI provider set up in it, and is declared for Drupal ^11.3 only, because the AI module does not yet declare Drupal 12 support. VVJ Core itself and every VVJ format install on Drupal 12 without it; on Drupal 12, leave this sub-module off until the AI module supports Drupal 12.
• Filesystem: keep this module in modules/contrib/vvj_core (Composer default). Pattern JavaScript loads shared files from that path.

Recommended modules/libraries

• Any VVJ pattern module v2.x that matches your design - see the table under Features. Most sites install VVJ Core only as a dependency of the formats they need.
• Paragraphs Bundles (Flash Web Center) - optional companion suite for rich paragraph-based page building; often used on the same sites as VVJ Views formats.
• Drush - recommended for updates and cache rebuilds after upgrading from v1.

No external JavaScript libraries (jQuery, Slick, Swiper, etc.) are required - the suite uses native browser APIs and custom elements.

Similar projects

Several contrib projects add interactivity to Views or lists. VVJ differentiates as follows:

• Views style / row plugins (various contrib modules) - often depend on jQuery or a specific theme framework. VVJ uses vanilla JavaScript and ships a coordinated family of formats with shared accessibility and performance behavior.
• Views Slideshow and jQuery-based carousels - mature ecosystems but heavier dependencies. VVJ Slideshow (VVJS) is part of this suite with a lighter, modern JS architecture in v2.
• UI Suite / component libraries - broader design-system tooling. VVJ targets Views-specific list rendering with deep format-option UIs site builders already know from Views.
• Custom theme JavaScript - maximum flexibility but per-site maintenance. VVJ gives configurable formats in the Views UI without custom code for common patterns.

VVJ Core specifically has no direct equivalent as a standalone download - it is the shared library for this suite, similar in role to how other multi-module families depend on a common base module.

Supporting this Module

VVJ Core is free, open source software (GPL-2.0-or-later), maintained by Alaa Haddad / Flash Web Center.

• Professional Drupal development and support: flashwebcenter.com
• Bug reports and feature requests: use this project's issue queue
• Pattern-specific bugs (accordion, slideshow, etc.): file in the relevant sibling project's queue (VVJA, VVJS, …) after confirming the issue is not in shared VVJ Core code.

Community Documentation

• In-site help: /admin/help/vvj_core (after enabling the module)
• Pattern module documentation: each sibling project page (VVJA, VVJS, etc.) includes format-specific guides and examples
• Try it quickly: use SimplyTest.me or DrupalPod to spin up a test site, then install VVJ Core plus one pattern module
• Maintainer profile: drupal.org/u/flashwebcenter

Additional information

Version notes: VVJ Core is new in v2.0 - there is no 1.x release. Sites on VVJ 1.x do not have this module until they upgrade to 2.x. The current release is 2.0.1: it adds the optional VVJ Core AI sub-module, the v1 to v2 option converter, a truthful drush vvj:upgrade audit, and a fix for a console error ("Transition was aborted because of invalid state. Document hidden") that autoplaying formats raised in background tabs.

Troubleshooting:

• Errors mentioning missing Twig classes after upgrade - run drush cr to rebuild the container.
• JavaScript errors loading vvj-element-base.js - confirm VVJ Core is installed at modules/contrib/vvj_core.
• Pattern module will not enable - install VVJ Core files first, then the pattern module.

Support and maintenance

Questions, ideas, and bug reports are welcome. Please use this project’s issue queue so discussions and solutions remain available to the Drupal community.

Maintainers monitor issues, but response times depend on availability.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.