Nuxt Eco-System

To provide an awesome developer experience, we created and maintain a set of Nuxt modules, that will make your life easier when working with a decoupled Drupal backend.

Overview of our Nuxt Modules

This page provides an overview of the related modules and what they do for you.

Nuxt GraphQL Middleware

This module exposes GraphQL queries and mutations as fully typed API endpoints. It hides your GraphQL server from public access and prevents bundling large queries.

To understand the concept of the GraphQL middleware, please check the Architecture page.

Nuxt Multi Cache

This module provides a cache layer for your data, components and routes. It dynamically defines CDN cache control headers and provides a cache management API that can be connected with the well-known Purge module of Drupal. In the blökkli starterkit, this is already wired up for your convenience.

Nuxt Language Negotiation

This module provides basic multi-language support for a Nuxt application with Drupal in mind. For more information, please check the Multilangue Setup page.

Nuxt Easy Texts

This module is a drop-in replacement of the famous Drupal t function. It provides a simple way to manage translations in your Vue components. It extracts strings and sends them to the Drupal backend to make them editable by editors. For more information, please check the Multilangue Setup page.

Nuxt Rokka Image

Please check the documentation about image handling for more information.

Nuxt SVG Icon Sprite

Please check the documentation about icon handling for more information.

VuePal

This module provides a bridge between Drupal and Vue. It allows you to display an admin toolbar and an environment indicator in your Nuxt application. It also provides an easy way to fetch Drupal route data and metatags in your application.

It also comes with a LocalTasks component to display the local tasks of a Drupal page.

blökkli

This module provides the in-page editing experience for Drupal. It allows you to edit paragraphs in a new way.

Please check the documentation about blökkli for more information.

Recommended other Nuxt Modules

We recommend the following Nuxt modules to make your life easier:

@nuxt/eslint module

Make sure your code is clean and follows the best practices.

@nuxtjs/tailwindcss module

You love it or hate it. Tailwind is a great CSS framework to speed up your frontend development.

vitest

A testing framework for Vue.js applications. It provides a simple way to write tests for your Vue components.