Nuxt uHeadless

Appearance

Configuration ​

You can set default configuration for uHeadless in you nuxt.config.ts file.

Minimal setup ​

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com'
  }
})

Sitemap ​

By default uHeadless applies a sitemap route located on /sitemap.xml. You can disable this by setting sitemap to false.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    sitemap: false // default: true
  }
})

Middleware ​

By default uHeadless applies it's routing middleware to automatically fetch pages when navigation the Nuxt app. You can disable this behaviour by setting middleware to false.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    middleware: false // default: true
  }
})

SEO ​

By default uHeadless applies seo data automatically using the useSeo composable. You can disable this behaviour by setting useSeo to false. For this option to take effect, middelware must be enabled.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    middleware: true,
    useSeo: false
  }
})

Depth ​

By default uHeadless uses a depth of 2 in all it's request for url and query resources. You can override this by setting the depth configuration option.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    depth: 3 // default: 2
  }
})

By default uHeadless does not include breadcrumbs in the url results. You can specify to include these using the breadcrumb configuration option..

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    breadcrumb: true // default: false
  }
})

Configuring root and silos ​

By default uHeadless uses this configuration for fetching root and silos.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    documentTypes: {
      silos: {
        contentTypeAliases: ['silo'],
      },
      roots: {
        contentTypeAliases: ['web'],
      },
    }
  }
})

You can configure a specific depth for both silos and root by setting the depth configuration.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    documentTypes: {
      silos: {
        contentTypeAliases: ['silo'],
        depth: 1
      },
      roots: {
        contentTypeAliases: ['web'],
        depth: 1
      },
    }
  }
})

You can configure a specific depth for both silos and root by setting the depth configuration.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    documentTypes: {
      silos: {
        contentTypeAliases: ['silo'],
        depth: 1,
        propertiesToInclude: ['nodeName', 'properties.navigation']
      },
      roots: {
        contentTypeAliases: ['web'],
        depth: 1,
        propertiesToInclude: ['nodeName', 'properties.navigation']
      },
    }
  }
})

As an alternative to include you may use exclude instead.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    documentTypes: {
      silos: {
        contentTypeAliases: ['silo'],
        depth: 1,
        propertiesToExclude: ['properties.buildingBlocks']
      },
      roots: {
        contentTypeAliases: ['web'],
        depth: 1,
        propertiesToExclude: ['properties.buildingBlocks']
      },
    }
  }
})

Trailing slash ​

You can define if uHeadless should enforce trailing slash or non-trailing slash in the urls. For this option to take effect, middelware must be enabled.

ts
export default defineNuxtConfig({
  modules: ['@uheadless/nuxt'],
  uheadless: {
    token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx-v2',
    hostname: 'example.com',
    trailingSlash: false // default: true
  }
})