hero

DruxtJS Site

Out of the box decoupled Drupal Site module for DruxtJS.

Get started

Simplicity first

Using minimal configuration, DruxtJS Site uses Drupal's JSON:API data to drive a Vue.js powered decoupled site.

NuxtJS in the front

Nuxt is based on a powerful modular architecture. You don't have to reinvent the wheel to get PWA benefits.

Drupal in the back

Leverage an API-first architecture, robust configuration management, and unparalleled extensibility to build the web of the future.

DruxtJS Site gives you a simple, out of the box, decoupled Drupal site experience with the power of Vue and Nuxt.

Using Drupal's built in Entity display modes and Field formatter system, Views, Blocks and more, DruxtJS Site provides the out of the box experience you expect.

# The DruxtSite component

Druxt Site provides a Vue.js component to render a Drupal Site.

<DruxtSite :theme="theme" />
1

Get started with the Guide and API Documentation.

# Druxt component

The DruxtSite component is compatible with the DruxtJS component theming system:

<Druxt module="site" :theme="theme" :wrapper="wrapper">
1

See the Druxt component documentation (opens new window) for more information.

# Features

  • Router with path alias and redirect support for Entity and Views pages.
  • Vuex based, on-demand JSON:API resource loading.
  • Entity / Field render system powered by Drupal display modes.
  • Block region and Content block component rendering.
  • Views and Views blocks via the Drupal JSON:API Views module (opens new window).
  • Breadcrumb, Menus and more.