Nuxt Drupal-CE Connector

The Drupal Custom Elements Connector makes it easy to connect Nuxt with Lupus Decoupled Drupal and provide scaffold components to get started.


  1. Add nuxtjs-drupal-ce dependency to your Nuxt project
npm install nuxtjs-drupal-ce@beta
yarn add nuxtjs-drupal-ce@beta
  1. Add nuxtjs-drupal-ce to the modules section of nuxt.config.js
export default defineNuxtConfig({
  modules: [
  drupalCe: {
    baseURL: '',
    // more options...

The module defaults work well with Lupus Decoupled Drupal, so setting the baseURL is usually enough.

  1. Get started quickly by scaffolding initial files:
rm -f app.vue && npx nuxt-drupal-ce-init


The composables help to fetch page and menu data, handle errors, and render custom components.


This function exports a collection of utility methods to fetch data from Drupal CE.

Example import of the fetchPage method:

<script setup>
  const { fetchPage } = useDrupalCe()
  const page = await fetchPage(useRoute().path)

List of methods:

  • fetchPage(path, query) - Fetches a page by path.
  • fetchMenu(name) - Fetches a menu by name.
  • getMessages() - Returns the current messages.
  • renderCustomElement(elements) - Renders one or multiple custom elements.


The module provides a set of scaffold files to get started quickly.

To generate the scaffold pages and components, run:

rm -f app.vue && npx nuxt-drupal-ce-init

The full list of files is available in the nuxtjs-drupal-ce repository, and includes:

  • ./app.vue
  • ./components/
  • ./pages/[...slug].vue