Installation

Requirements

• The Craft Query API plugin must be installed and configured.
• Nuxt 3 is required.

Install

You can add the Nuxt module at anytime during your Nuxt project development by installing the nuxt-craftcms module.

npx nuxi module add nuxt-craftcms

You can configure Nuxt Craft CMS module with the craftcms property in your nuxt.config file.

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: ['nuxt-craftcms'],

  craftcms: {
    // My custom configuration
  }
});

Configuration

You can now start to configure the craftcms property.

/* These are the defaults: 

craftcms: {
    baseUrl: '', // Required
    authToken: '' // Required
    debug: false,
    registerComponents: true,
    enableEntryTypeMapping: true,
    siteMap: [],
    siteDetectionMode: 'path',
  }
*/

// Real life Example
export default defineNuxtConfig({
  craftcms: {
    baseUrl: 'https://example.ddev.site',
    authToken: 'owiwrtgnfsjhsadgsdagf',
    siteMap: [
      {
        handle: 'en',
        origin: 'http://localhost:3000',
        path: '/',
        id: 1,
        lang: 'en',
        label: 'En',
      },
      {
        handle: 'de',
        origin: 'http://localhost:3000/de',
        path: '/de',
        id: 2,
        lang: 'de',
        label: 'De',
      },
    ],
  },
});

• baseUrl: Refers to the PRIMARY_SITE_URL of Craft CMS, without a trailing slash.
• authToken: The Bearer token used for authentication.
• debug: Enables debug mode and log built urls
• registerComponents: Globally register all components
• enableEntryTypeMapping: This allows the CraftPage component to automatically detect your entries based on their section handle and entry type.
• siteMap: Defines an array of sites to enable multisite support. Each site object must include a handle and an origin.
• siteDetectionMode: Whether site should be detected by the origin or the path defined in the site objects.

Development with DDEV

DDEV utilizes a self-signed SSL certificate. To ensure Node can connect without issues, you’ll need to allow it to bypass SSL verification by setting the following environment variable:

NODE_TLS_REJECT_UNAUTHORIZED=0

Boom, finished. 🚀