DruxtJS; A bridge between frameworks.
DruxtJS provides an easy connection between a Drupal JSON:API backend and Nuxt.js frontend application.
Links
Install
$ npm install druxt
Usage
Drupal JSON:API client
Two methods of communication with the Drupal JSON:API are provided by Druxt, a framework agnostic DruxtClient and the DruxtStore Vuex module, which adds an additional cache layer.
Example:
const { DruxtClient } = require('druxt')
new DruxtClient('https://demo-api.druxtjs.org')
.getCollection('node--page')
.then((res) => {
})
Get started with the Guide and API Documentation.
Nuxt Module / Plugin
The Nuxt module adds the Vue components, Vuex store and DruxtClient plugin to your Nuxt application.
Add module to nuxt.config.js
module.exports = {
modules: ['druxt'],
druxt: {
baseUrl: 'https://demo-api.druxtjs.org'
}
}
The $druxt
plugin gives your Nuxt application access to the DruxtClient
.
Example:
<script>
export default {
async fetch() {
this.page = await this.$druxt.getResource({
type: 'node--page',
id: 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd',
})
},
data: () => ({ page: null }),
}
</script>
Themable modules
Druxt uses a Module and slot-based Wrapper component system, making it easy to render and theme Drupal data.
Find more details in the Guide
Druxt is an open source project, built by the comunity for the community.
Find support or get involved in building Druxt via the community channels:
Fully decoupled Drupal sites
The DruxtSite module provides minimal configuration, decoupled Drupal site functionality.
Try out the Umami demo, or checkout the source for the Nuxt.js frontend and the Drupal 9 backend.