經過了好幾天的前置作業，終於要開始建立 module 啦!

安裝模組工具

我使用的是官方提供的模板與方法

1. 執行 npx nuxi init -t module [自訂模組名稱] ，接下來 terminal 會出現一些選項，按照自己習慣的選~(我選 npm)

2. 安裝完成後在專案資料夾內看到剛剛命名的資料夾出現了 (名稱要自己取啦嘿)

3. 模組資料夾裡面的結構如下

   

   我們主要會用到兩個區塊

   • playground: 內部預覽區域，相當於使用者的 Nuxt 環境
   • src: 這裡是模組的開發區域
     • runtime 資料夾: 放開發配置，例如 assets、pages、plugins 等等...
     • module.ts : module 的設定在此進行

src/module.ts

• 先介紹 module 裡面的初始配置~

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

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

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'seal-module', // module 名稱，會對應 npm 的發布名稱 (這邊改了 package.json 也要記得改)
    configKey: 'sealModule',  // 如果有設定給使用者的模組自訂選項，使用者的 nuxt.config 就對應這個名稱 (如下圖)
  },
  defaults: {}, // 模組預設的選項
  setup(_options, _nuxt) {
	  // 模組的運作邏輯在此 
	  //_options 對應的就是上面的 ModuleOptions 型別
	  //_nuxt 則是呼叫 nuxt 方法，比如 hook
	  
	  
    const resolver = createResolver(import.meta.url) // createResolver 獲取 modules 內的相對路徑，接下來會很常用到~

	  // 安裝套件
    addPlugin(resolver.resolve('./runtime/plugin'))
  },
})

meta.configKey 的對應關係

安裝完成之後就將 terminal 的路徑移動到模組開發資料夾下，第一次使用請先執行 npm run dev:prepare 讓它準備 local 端的文件，接下來使用 npm run dev 準備啟動看看囉~

官方文件連結:

• Module Author Guide
• Modules