Introduction

Overview

The Lupus Nuxt.js Drupal stack provides a solution for soft-decoupled Drupal. It combines the power of Drupal with Nuxt.js by using custom elements. Compared to other ways to decouple Drupal, it keeps many of Drupal's features, but allows combining it with a modern, Javascript based frontend like Nuxt.js.

Drupal + Custom Elements + Nuxt.js = ❤

Features

Modern frontend via Nuxt.js & Vue.js
Drupal powered routing, path resolution & URL aliases
Drupal powered editorial control of pages & layouts
Drupal powered cookie based authentication, caching and previews
Allows for using all the great Nuxt and Drupal modules

How does it work?

The Lupus Custom Elements Renderer Drupal modules makes Drupal render its content into custom element markup, on a very high, component-oriented level. The custom elements map to Vue components and are rendered as usual via Nuxt.js.

What is a custom element?

Today's browsers provide an API for developers to define their own HTML elements, like <flag-icon country="nl"></flag-icon>. Besides that, many frontend frameworks render their components using the same, or similar custom elements syntax - like Vue.js. That way, Drupal output rendered as custom elements can easily be picked up and rendered by Vue.js, Web components, or other frontend frameworks.

Example element

This is how twitter embed could look like when rendered as custom element:

<twitter-tweet 
    src="https://twitter.com/nuxt_js/status/1314628331841761289" 
    title="Some editorial title">
</twitter-tweet>

Thus, it would be rendered with a Vue component with src and title props:

<template>
  <div class="twitter-tweet">
    <h3>{{ title }}</h3>
    Render the tweet from {{ src }} here.
  </div>
</template>

<script>
export default {
  props: {
    src: String,
    title: String
  },
}
</script>
  Setup