SDX Vue Base

SDX Vue Base is a hidden base theme that provides Vue 3 component implementations for standard Drupal theme hooks. It serves as the foundation for building Vue-powered Drupal themes with the SDX DRAST theme engine, so you don't have to re-implement common templates from scratch. It is the Vue counterpart of SDX React Base.

Set base theme: sdx_vue_base in your theme's .info.yml and start building. All 90+ template overrides are inherited automatically.

Features

Template overrides

• 90+ Drupal theme hooks implemented as Vue single-file components
• Form elements: input, textarea, select, checkboxes, radios, datetime, details, fieldset, vertical tabs, text-format wrapper, file upload
• Block system: generic block + specific overrides for page title, breadcrumb, messages, menu, branding, help, local tasks and local actions blocks
• Views: views-view, views-view-table, views-view-unformatted, views-view-list, grid, fields, grouping, summaries, views-mini-pager, views-exposed-form and the Views UI templates
• Navigation: menu, breadcrumb, pager, local tasks, local actions, links, item-list
• Administration: status-report, system-modules, system-themes-page, admin-page, admin-block, update-report, confirm-form
• Fields: field, field-multiple-value-form
• Utility: table, image, links, dropbutton, page-title, user, username, time, mark

SPA shell

• BaseLayout component over @sdx/app with the content area (AJAX form rebuilds, DataProvider outlet, template pipeline output) inside an error boundary
• Toast notification system for Drupal status messages
• Confirm modal (Teleport) for entity delete operations
• Theme-aliased component registry so the server-side template resolver and the client agree on component ids

Shared components

• SidePanel: dual-mode component for content display and Drupal form loading via AJAX
• useDrupalForm: composable encapsulating AJAX form handling, CSRF tokens, multi-step forms, and response parsing
• ErrorBoundary: graceful error display with component error reporting
• useFocusTrap: focus trap composable for modals and panels
• Select: native and styled select component
• TagInput: pill-based autocomplete input
• DropdownMenu: accessible dropdown menu
• BlockShell: block wrapper with contextual links support
• Region / ContentRenderer: structured component-tree and legacy HTML region rendering with select, vertical-tabs, dropdown and date-picker enhancements

Code quality

• TypeScript throughout (<script setup lang="ts">) with typed props and composables
• All imports use SDX aliases (@sdx/*, @theme:sdx_vue_base/*), no relative paths
• All user-facing strings use Drupal's t() translation function
• Accessibility attributes throughout (aria-modal, aria-label, role, focus management)
• Follows the SDX @sdx/html trust contract: text sinks are escaped, only serialized markup renders as HTML

How It Works

Extend the base theme in your own theme's .info.yml:

name: 'My Admin Theme'
type: theme
engine: drast
base theme: sdx_vue_base
dependencies:
  - sdx:sdx
  - sdx:sdx_vue
  - sdx_drast:sdx_drast

Your theme inherits all template overrides. Override any template by creating a same-named directory in your theme's templates/ folder. The SDX build pipeline handles the full inheritance chain automatically. A child theme without its own components/app/app.vue gets a generated app entry with the framework's default layout; reuse the base layout with import BaseLayout from '@theme:sdx_vue_base/app/BaseLayout.vue' in your own app component.

Additional Requirements

• Drupal 11.3+
• PHP 8.3+
• SDX core module with sdx_vue, sdx_sass, sdx_router and a bundler (sdx_vite) enabled
• SDX DRAST (Theme Engine)
• Node.js 18+ for building components

Recommended modules/libraries

• sdx_ssr (included in SDX) for server-side rendering — the theme declares sdx_ssr: true and ships its own app entry
• SDX React Base — the React counterpart with the same template set

Supporting this Theme

Report bugs and feature requests in the issue queue.

Part of the SDX ecosystem.

Community Documentation

- Coming Soon -