feat(#693): update druxt-views for @nuxt/kit

packages/views/README.md

@@ -24,7 +24,7 @@ Add module to `nuxt.config.js`
 ```js
 module.exports = {
   modules: [
-    'druxt-views'
+    'druxt-views/nuxt'
   ],
   druxt: {
     baseUrl: 'https://demo-api.druxtjs.org',

packages/views/package.json

@@ -32,15 +32,18 @@
       "require": "./dist/druxt-views.ssr.js",
       "import": "./dist/druxt-views.esm.js"
     },
-    "./components/*": "./dist/components/*"
+    "./components/*": "./dist/components/*",
+    "./nuxt": "./nuxt/index.js"
   },
   "main": "dist/druxt-views.ssr.js",
   "module": "dist/druxt-views.esm.js",
   "files": [
     "dist",
+    "nuxt",
     "templates"
   ],
   "dependencies": {
+    "@nuxt/kit": "^3.12.2",
     "axios": "0.28.0",
     "deepmerge": "^4.3.1",
     "drupal-jsonapi-params": "^2.3.1",

packages/views/src/index.js

@@ -1,18 +1,3 @@
-import { DruxtViewsNuxtModule } from './nuxt'
-DruxtViewsNuxtModule.meta = require('../package.json')
-
-/**
- * The Nuxt.js module function.
- *
- * Installs the module functionality in a Nuxt application.
- *
- * @type {Function}
- * @exports default
- * @name DruxtViewsNuxtModule
- * @see {@link ./nuxt|DruxtViewsNuxtModule}
- */
-export default DruxtViewsNuxtModule
-
 /**
  * Vuex store module.
  *
@@ -36,3 +21,12 @@ export { DruxtViewsStore } from './stores/views'
  * @see {@link ./mixins/view|DruxtViewsViewMixin}
  */
 export * from './mixins'
+
+/**
+ * Default function to alert user to incorrectly installed module.
+ *
+ * This was added as part of the @nuxt/kit update due to breaking changes.
+ */
+export default () => {
+  throw new Error("DruxtViews Nuxt module must be installed as 'druxt-views/nuxt'")
+}

packages/views/src/nuxt/index.js

@@ -1,5 +1,6 @@
+import { addPluginTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
 import { join, resolve } from 'path'
-import DruxtViewsStorybook from './storybook'
+// import DruxtViewsStorybook from './storybook'
 
 /**
  * The Nuxt.js module function.
@@ -23,45 +24,56 @@ import DruxtViewsStorybook from './storybook'
  *
  * @param {object} moduleOptions - Nuxt module options object.
  */
-const DruxtViewsNuxtModule = async function (moduleOptions = {}) {
-  // Set default options.
-  const options = {
-    baseUrl: moduleOptions.baseUrl,
-    ...(this.options || {}).druxt || {},
-    views: {
-      query: {},
-      ...((this.options || {}).druxt || {}).views,
-      ...moduleOptions,
+const DruxtViewsNuxtModule = defineNuxtModule({
+  meta: {
+    name: 'druxt-views',
+  },
+  defaults: {
+    baseUrl: '',
+    endpoint: '/jsonapi'
+  },
+
+  async setup(moduleOptions, nuxt) {
+    // Set default options.
+    const options = {
+      baseUrl: moduleOptions.baseUrl,
+      ...nuxt.options?.druxt || {},
+      views: {
+        query: {},
+        ...nuxt.options?.druxt?.views,
+        ...moduleOptions,
+      }
     }
-  }
 
-  // Register components directories.
-  this.nuxt.hook('components:dirs', dirs => {
-    dirs.push({ path: join(__dirname, 'components') })
-    dirs.push({ path: join(__dirname, 'components/blocks') })
-  })
+    // Register components directories.
+    nuxt.hook('components:dirs', dirs => {
+      dirs.push({ path: join(__dirname, '../dist/components') })
+      dirs.push({ path: join(__dirname, '../dist/components/blocks') })
+    })
 
-  // Add dependant modules.
-  await this.addModule(['druxt', options])
-  const modules = ['druxt-entity', 'druxt-schema']
-  for (const module of modules) {
-    await this.addModule([module, { baseUrl: options.baseUrl }])
-  }
+    // Add dependant modules.
+    await installModule('druxt/nuxt', options, nuxt)
+    const modules = ['druxt-entity/nuxt', 'druxt-schema/nuxt']
+    for (const module of modules) {
+      await installModule(module, { baseUrl: options.baseUrl }, nuxt)
+    }
 
-  // Add Vuex plugin.
-  this.addPlugin({
-    src: resolve(__dirname, '../templates/store.js'),
-    fileName: 'store/druxt-views.js',
-    options: options.druxt
-  })
+    // Add Vuex plugin.
+    addPluginTemplate({
+      src: resolve(__dirname, '../templates/store.js'),
+      fileName: 'store/druxt-views.js',
+      options: options.druxt
+    })
 
-  // Enable Vuex Store.
-  options.store = true
+    // Enable Vuex Store.
+    nuxt.options.store = true
+  }
 
   // Nuxt Storybook.
-  this.nuxt.hook('storybook:config', async ({ stories }) => {
-    await DruxtViewsStorybook.call(this, { stories })
-  })
-}
+  // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
+  // this.nuxt.hook('storybook:config', async ({ stories }) => {
+  //   await DruxtViewsStorybook.call(this, { stories })
+  // })
+})
 
-export { DruxtViewsNuxtModule }
+export default DruxtViewsNuxtModule

packages/views/test/nuxt/index.test.js

@@ -1,27 +1,28 @@
-import { DruxtViewsNuxtModule } from '../../src/nuxt'
+import DruxtViewsNuxtModule from '../../src/nuxt'
 
 jest.mock('../../src/nuxt/storybook')
 
-const mock = {
-  addModule: jest.fn(),
-  addPlugin: jest.fn(),
-  nuxt: {
-    hook: jest.fn((hook, fn) => {
-      const arg = {
-        'components:dirs': [],
-        'storybook:config': { stories: [] }
-      }
-      return fn(arg[hook])
-    }),
-  },
-  options: {
-    druxt: {},
-    modules: [],
-  },
+jest.mock('@nuxt/kit', () => ({
+  addPluginTemplate: jest.fn(),
+  defineNuxtModule: (module) => module,
+  installModule: jest.fn(),
+}))
+
+import { addPluginTemplate, installModule } from '@nuxt/kit'
+
+const nuxtMock = {
+  hook: jest.fn((hook, fn) => {
+    const arg = {
+      'components:dirs': [],
+      'storybook:config': { stories: [] }
+    }
+    return fn(arg[hook])
+  }),
+  options: {},
 }
 
 test('Nuxt module', async () => {
-  await DruxtViewsNuxtModule.call(mock)
-  expect(mock.addModule).toHaveBeenCalledTimes(3)
-  expect(mock.addPlugin).toHaveBeenCalledTimes(1)
+  await DruxtViewsNuxtModule.setup({}, nuxtMock)
+  expect(installModule).toHaveBeenCalledTimes(3)
+  expect(addPluginTemplate).toHaveBeenCalledTimes(1)
 })