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.
