Stuart Clark (@Deciphered) created a fully decoupled Umami demonstration using DruxJS.

The frontend can be seen at https://demo.druxtjs.org, the code at https://github.com/druxt/demo.druxtjs.org
The backend can be seen at https://demo-api.druxtjs.org/jsonapi, the code at https://github.com/druxt/demo-api.druxtjs.org

Here is the DrupalGov video presentation / demo: https://youtu.be/LkIe6L4jxTc
02:47 Setting up frontend
04:30 See it in action / Theming

It has some neat features:

  • Decoupled router based navigation with support for Url aliases, Nodes and Views
  • Vuex based state management / caching
  • Drupal Display mode based Entity render system
  • Slot based themeable component system to customize Entities, Fields, Blocks, etc.
  • Block Regions, Blocks and Content Block support.
  • Menus and Breadcrumbs.
  • Lunr search.
  • Contact form support.

TODO

It would be ideal to move any of the custom Drupal code / modules into core in the future:

Comments

Deciphered created an issue. See original summary.

deciphered’s picture

deciphered
Primary language English
Location Ballarat, Victoria, Australia
commented
Issue summary: View changes
baddysonja’s picture

baddysonja
Primary language Icelandic
Location Frankfurt am Main
commented

This is great. Could you please tailor this to the menu part as that is the focus of this initiative. Maybe it is already, just to make this focused on the initiative work.

deciphered’s picture

deciphered
Primary language English
Location Ballarat, Victoria, Australia
commented

The demo has two menu's provided by the Druxt Menu module: https://menu.druxtjs.org

Each menu is placed into the demo via the DruxtBlockRegion components:
- Header region: https://github.com/druxt/demo.druxtjs.org/blob/develop/layouts/default.v...
- Footer region: https://github.com/druxt/demo.druxtjs.org/blob/develop/layouts/default.v...

The default menu block is being overridden with a custom component for each of these menus for theming:
- https://github.com/druxt/demo.druxtjs.org/blob/develop/components/druxt/...
- https://github.com/druxt/demo.druxtjs.org/blob/develop/components/druxt/...

A menu can be implemented anywhere manually with the DruxtMenu component:

  <DruxtMenu :name="menuName" />

The component uses props and templates for customisation:

  <DruxtMenu name="main" depth="2">
    <template #item="{ item: { entity }, to }">
      <nuxt-link :to="to">
        {{ entity.attributes.title }}
      </nuxt-link>
    </template>
  </DruxtMenu>

Resources:
- API Docs: https://menu.druxtjs.org/api
- Github: https://github.com/druxt/druxt-menu

deciphered’s picture

deciphered
Primary language English
Location Ballarat, Victoria, Australia
commented

Here's a demonstration of how to use the Druxt Menu module in a NuxtJS frontend: https://youtu.be/2OERkaTmwhI

Points of interest:
- 0:37 - Install Druxt Menu
- 0:48 - Configure Nuxt
- 2:20 - DruxtMenu component
- 2:29 - Menu rendered
- 3:28 - Slot based theming
- 4:10 - Props based theming

This demo uses the https://demo-api.druxtjs.org/jsonapi backend, but you can use your own Drupal backend, you just need the DruxtJS Drupal module enabled and configured.

This demo doesn't show it, but there is also template based theming:

<DruxtMenu name="main">
  <template #item="{ item: { entity }, to }">
    ...
  </template>

  <template #parent="{ item: { entity, children } }">
    ...
  </template>
</DruxtMenu>