DruxtJS

Guide

DruxtClient

The DruxtClient is the communication layer between Nuxt and the Drupal JSON:API.

It provides methods to get JSON:API Resources and Collection of resources from the Drupal server using the Axios library.

Setup

The Client requires the baseUrl for your Drupal backend:

const { DruxtClient } = require('druxt');
const druxt = new DruxtClient('https://demo-api.druxtjs.org');

It also provides an options object to configure the client:

const druxt = new DruxtClient('https://demo-api.druxtjs.org', {
  axios: {
    headers: { 'X-Custom-Header': true },
  },
  endpoint: 'jsonapi',
});

See the API documentation for more details.

Getting a resource

The getResource method requires the resource type and id, and has an optional query and prefix parameter.

Get a page.

druxt.getResource('node--page', 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd').then((resource) => {
  // Do the thing.
});

Get a page's title.

druxt
  .getResource('node--page', 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd', 'fields[node--page]=title')
  .then((resource) => {
    // Do the thing.
  });

Get a translated page.

druxt.getResource(
  'node--page',
  'd8dfd355-7f2f-4fc3-a149-288e4e293bdd'
  undefined,
  'es'
).then(resource => {
  // Do the thing.
})

Getting a collection of resources

The getCollection method requires the resource type, and has an optional query and prefix parameter.

Get a collection of recipes.

druxt.getCollection('node--recipe').then((collection) => {
  // Do the thing.
});

Get the first 5 recipes.

druxt.getCollection('node--recipe', 'page[limit]=5').then((collection) => {
  // Do the thing.
});

Get the first 5 recipes in spanish.

druxt.getCollection('node--recipe', 'page[limit]=5', 'es').then((collection) => {
  // Do the thing.
});

Getting all collections of a resource

The getCollectionAll takes the same parameters as the getCollection method, and will return an array of all collections.

Get all recipes.

druxt.getCollectionAll('node--recipe').then((collections) => {
  for (const collection of collections) {
    for (const resource of collection.data) {
      // Do the thing.
    }
  }
});
  • Search