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 }