之前有簡單介紹過 module.ts 內有個 interface 是定義給使用者的模組自訂選項類型，它的名稱對應的是在 defineNuxtModule 傳入的型別，官方預設名稱是 ModuleOptions

// module.ts
import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

// 定義給使用者的模組自訂選項類型
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
 // ...
})

舉例來說: 目前的模組必定會新增 demo 元件的展示頁，但開發後期或是完成後就不需要這些展示頁面了，那我們可以設定一個開關來關閉展示頁面的引入

step 1: 定義 interface

export interface ModuleOptions {
	extendDemoPages?: boolean
}

step 2: 設定預設，boolean 在 undefined 的情況下都是 false，為了效果呈現我把預設改為 true

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'seal-module', // module 名稱，會對應 npm 的發布名稱 (這邊改了 package.json 也要記得改)
    configKey: 'sealModule',  // 如果有設定給使用者的模組自訂選項，使用者的 nuxt.config 就對應這個名稱 (如下圖)
  },
  defaults: {
	  extendDemoPages: true,
  }, // 模組預設的選項
  setup(_options, _nuxt) {
	  // 模組的運作邏輯在此 

  },
})

step 3: 關閉展示頁引入，透過 step 提供的參數 _option 來獲取對應的設定就可以囉!

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'seal-module', // module 名稱，會對應 npm 的發布名稱 (這邊改了 package.json 也要記得改)
    configKey: 'sealModule',  // 如果有設定給使用者的模組自訂選項，使用者的 nuxt.config 就對應這個名稱 (如下圖)
  },
  defaults: {
	  extendDemoPages: true,
  }, // 模組預設的選項
  setup(_options, _nuxt) {
	  // 模組的運作邏輯在此
	  // ....省略前面
	  if (_options.extendDemoPages) {
      const files = fs.readdirSync(resolver.resolve('./runtime/pages/demo'))
      extendPages((pages) => {
		     // 過程省略
      })
      
      addLayout(resolver.resolve('./runtime/layouts/demo-layout.vue'), 'seal-demo-layout')
    }
  },
})

step 4: 接著到 playground/nuxt.config.ts 中設定將展示頁面關閉，模組的設定項目名稱對應的是 module.ts 中的 meta.configKey

export default defineNuxtConfig({
  modules: ['../src/module'],
  sealModule: {},
  devtools: { enabled: true },
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/seal.png' }
      ]
    }
  },
  sealModule: {
    extendDemoPages: false,
  }
})

重新 npm run dev 後就會發現設定生效囉!