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.

Setup

1. Add nuxtjs-drupal-ce dependency to your Nuxt project

npm install nuxtjs-drupal-ce@beta

yarn add nuxtjs-drupal-ce@beta

2. Add nuxtjs-drupal-ce to the modules section of nuxt.config.js

export default defineNuxtConfig({
  modules: [
    'nuxtjs-drupal-ce',
  ],
  drupalCe: {
    baseURL: 'https://your-drupal.example.com/ce-api',
    // more options...
  }
})

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

3. Get started quickly by scaffolding initial files:

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

Composables

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

useDrupalCe

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)
</script>

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.

Components

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