Lupus Decoupled 1.4 Released with Vue and Canvas Support

Lupus Decoupled 1.4 Released with Vue and Canvas Support

Lupus Decoupled 1.4 marks a major step forward for frontend development in Drupal, introducing native Vue component previews, a refined JSON API with explicit slot and prop separation, expanded Views support, and full compatibility with Drupal Canvas 1.0.

The release enables seamless Vue component previews directly within the Drupal admin UI through the new nuxt-component-preview module, bundled with nuxtjs-drupal-ce 2.5. With the "Nuxt Preview" option enabled, editors can visualise component output directly in the backend interface.

A new explicit JSON format separates props and slots, improving compatibility with native Vue slot handling. This upgrade is opt-in, ensuring backward compatibility while simplifying component development.

Views integration has been enhanced with row wrappers, custom element naming, and inline JSON previews for easier debugging. The module also alerts developers when display plugins are misconfigured.

Support for Drupal Canvas 1.0 is now built in. Editors can preview Vue components while composing pages, with Nuxt delivering server-side rendering for optimal SEO. The feature relies on an auto-generated component-index.json derived from TypeScript metadata.

The lupus-decoupled-project template now includes a fully updated GitHub Codespaces and devcontainer setup, offering a smooth developer experience following the discontinuation of Gitpod.

To upgrade, install drupal/lupus_decoupled:^1.4 and drupal/custom_elements:^3.3, run drush updatedb -y, and update the frontend to nuxtjs-drupal-ce@^2.5. Enable the new JSON output via the Custom Elements settings screen.

Future efforts will focus on deeper integration with Drupal CMS 2.0 and further streamlining Canvas workflows, keeping modern frontend tooling tightly connected with Drupal's core strengths.

Explore documentation, try Lupus Decoupled online, or get involved at lupus-decoupled.org. For source updates and blog insights, visit the Drunomics blog.

Disclosure: This content is produced with the assistance of AI.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.

Related Organizations

Upcoming Events

Latest Opportunities