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.
• Drop-in v2 upgrade path — existing v1 View configurations continue to work; v2.0 does not require migrating View config.

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.1+ and PHP 8.3+ only):

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. No View configuration migration is required for v2.0. 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.1 or later (Drupal 12 supported). 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 (or another pattern) automatically requires drupal/vvj_core:^2.0.
• 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.

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.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!