diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json
index 76b6b99af..81ca7f0e3 100644
--- a/packages/breadcrumb/package.json
+++ b/packages/breadcrumb/package.json
@@ -33,15 +33,18 @@
"require": "./dist/druxt-breadcrumb.ssr.js",
"import": "./dist/druxt-breadcrumb.esm.js"
},
- "./components/*": "./dist/components/*"
+ "./components/*": "./dist/components/*",
+ "./nuxt": "./nuxt/index.js"
},
"main": "dist/druxt-breadcrumb.ssr.js",
"module": "dist/druxt-breadcrumb.esm.js",
"files": [
"dist",
+ "nuxt",
"templates"
],
"dependencies": {
+ "@nuxt/kit": "^3.12.2",
"druxt": "^0.22.0",
"druxt-blocks": "^0.17.1",
"druxt-router": "^0.29.1"
diff --git a/packages/breadcrumb/src/index.js b/packages/breadcrumb/src/index.js
index 59708b53e..c193c63bd 100644
--- a/packages/breadcrumb/src/index.js
+++ b/packages/breadcrumb/src/index.js
@@ -1,17 +1,3 @@
-import { DruxtBreadcrumbModule } from './nuxtModule'
-
-/**
- * The Nuxt.js module function.
- *
- * Installs the module functionality in a Nuxt.js frontend.
- *
- * @type {Function}
- * @exports default
- * @name DruxtBreadcrumbModule
- * @see {@link ./module|DruxtBreadcrumbModule}
- */
-export default DruxtBreadcrumbModule
-
/**
* Vue.js Mixin.
*
diff --git a/packages/breadcrumb/src/nuxt/index.js b/packages/breadcrumb/src/nuxt/index.js
new file mode 100644
index 000000000..f5c8416c2
--- /dev/null
+++ b/packages/breadcrumb/src/nuxt/index.js
@@ -0,0 +1,67 @@
+import { defineNuxtModule, installModule } from '@nuxt/kit'
+import { join } from 'path'
+
+/**
+ * The Nuxt.js module function.
+ *
+ * - Adds the Vue.js components to the Nuxt.js frontend.
+ *
+ * The module function should not be used directly, but rather installed via yout Nuxt.js configuration file.
+ *
+ * Options are set on the root level `druxt` Nuxt.js config object.
+ *
+* @example
nuxt.config.js @lang js
+ * module.exports = {
+ * modules: [
+ * 'druxt-breadcrumb'
+ * ],
+ * druxt: {
+ * baseUrl: 'https://example.com'
+ * }
+ * }
+ *
+ * @param {object} moduleOptions - Nuxt.js module options object.
+ */
+const DruxtBreadcrumbModule = defineNuxtModule({
+ meta: {
+ name: 'druxt-breadcrumb',
+ },
+ defaults: {
+ baseUrl: '',
+ endpoint: '/jsonapi'
+ },
+
+ async setup(moduleOptions, nuxt) {
+ // Set default options.
+ const options = {
+ baseUrl: moduleOptions.baseUrl,
+ ...nuxt.options?.druxt || {},
+ breadcrumb: {
+ ...nuxt.options?.druxt?.breadcrumb,
+ ...moduleOptions,
+ }
+ }
+
+ // Add dependent module.
+ await installModule('druxt/nuxt', options, nuxt)
+ await installModule('druxt-router/nuxt', options, nuxt)
+
+ // Register components directories.
+ nuxt.hook('components:dirs', dirs => {
+ dirs.push({ path: join(__dirname, '../dist/components') })
+ dirs.push({ path: join(__dirname, '../dist/components/blocks') })
+ })
+
+ // Nuxt Storybook.
+ // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
+ // nuxt.hook('storybook:config', ({ stories }) => {
+ // addTemplate({
+ // src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'),
+ // fileName: 'stories/druxt-breadcrumb.stories.js',
+ // })
+ // stories.push(resolve(nuxt.options.buildDir, './stories/druxt-breadcrumb.stories.js'))
+ // })
+ }
+})
+
+export default DruxtBreadcrumbModule
diff --git a/packages/breadcrumb/src/nuxtModule.js b/packages/breadcrumb/src/nuxtModule.js
deleted file mode 100644
index 754a67bb4..000000000
--- a/packages/breadcrumb/src/nuxtModule.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { join, resolve } from 'path'
-
-/**
- * The Nuxt.js module function.
- *
- * - Adds the Vue.js components to the Nuxt.js frontend.
- *
- * The module function should not be used directly, but rather installed via yout Nuxt.js configuration file.
- *
- * Options are set on the root level `druxt` Nuxt.js config object.
- *
-* @example nuxt.config.js @lang js
- * module.exports = {
- * modules: [
- * 'druxt-breadcrumb'
- * ],
- * druxt: {
- * baseUrl: 'https://example.com'
- * }
- * }
- *
- * @param {object} moduleOptions - Nuxt.js module options object.
- */
-const DruxtBreadcrumbModule = async function (moduleOptions = {}) {
- // Set default options.
- const options = {
- baseUrl: moduleOptions.baseUrl,
- ...(this.options || {}).druxt || {},
- breadcrumb: {
- ...((this.options || {}).druxt || {}).breadcrumb,
- ...moduleOptions,
- }
- }
-
- // Add dependent module.
- await this.addModule(['druxt', options])
- await this.addModule(['druxt-router/nuxt', options])
-
- // Register components directories.
- this.nuxt.hook('components:dirs', dirs => {
- dirs.push({ path: join(__dirname, 'components') })
- dirs.push({ path: join(__dirname, 'components/blocks') })
- })
-
- // Nuxt Storybook.
- this.nuxt.hook('storybook:config', ({ stories }) => {
- this.addTemplate({
- src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'),
- fileName: 'stories/druxt-breadcrumb.stories.js',
- })
- stories.push(resolve(this.options.buildDir, './stories/druxt-breadcrumb.stories.js'))
- })
-}
-
-DruxtBreadcrumbModule.meta = require('../package.json')
-
-export { DruxtBreadcrumbModule }