Getting started with DruxtSite

DruxtSite gives you an out-of-the-box Drupal site experience with a Nuxt.js frontend.

Think of the DruxtSite module as a distribution of Drupal, Nuxt and Druxt to provide a Vue.js theme layer for Drupal.

Quickstart - GitPod

Try out a pre-installed, pre-configured DruxtSite install with GitPod.

Open in Gitpod

Getting started

All Druxt sites need both Drupal (backend) and Nuxt (frontend) to be installed.

Each codebase can live in its own directory within a single repository, or exist in seperate repositories.


  1. Install Drupal

  2. Download the Drupal Druxt module:

    composer require drupal/druxt
  3. Install the module: Install the module

  4. Add the "access druxt resources" permission to a user/role: Druxt 'access druxt resources' permission


  1. Install Nuxt

    npx create-nuxt-app [destination]
  2. Install the Site module:

    npm i druxt-site
  3. Add the module and configuration to nuxt.config.js:

    export default {
      modules: [
      druxt: {
        baseUrl: ''

    * Note: Replace with your own Drupal backend.

  4. Add the DruxtSite component to your page or layout:

      <DruxtSite :theme="theme" />
  5. Start Nuxt: npm run dev