在準備發布 module 之前有一件很重要的事情！

官方在 **Module Author Guide** 提到

Published modules cannot leverage auto-imports for assets within their runtime directory. Instead, they have to import them explicitly from #importsor alike.
Indeed, auto-imports are not enabled for files within node_modules the location where a published module will eventually live) for performance reasons.
If you are using the module starter, auto-imports will not be enabled in your playground either.

意指為了效能上的考量，在 node_modules 無法吃到 Nuxt auto import 的東西，比如說 ref 、reactive、computed...等等， 以及在 composable 或是 utils 裡面定義的 function

因此當我們在建立 module 相關的元件時都要記得另外引入

比如說在button.vue 組件內使用到了defineProps 以及 withDefaults ，那就要記得從 vue 或是 #imports 引入，在 pages 的部份有用到也是。

如果在元件內有使用到 composable、utils 的方法時也要記得進行引入。

// src/components/button.vue
<script lang="ts" setup>
import { defineProps, withDefaults } from 'vue'

/** 按鈕型別 */
export interface ButtonPropsType {
  /** 按鈕文字 */
  text?: string
  /** 是否 不可點擊 */
  isDisabled?: boolean
  /** 是否 載入狀態 */
  isLoading?: boolean
  /** 按鈕 外觀樣式 */
  btnClass?: string
  /** 按鈕 icon */
  icon?: string
  /** icon 樣式 */
  iconClass?: string
}

withDefaults(defineProps<ButtonPropsType>(), {
  text: '',
  isDisabled: false,
  isLoading: false,
  btnClass: 'bg-primary-600 text-white',
  icon: '',
  iconClass: 'text-[20px]',
})
</script>

如果不確定引入要使用 #imports 或是 vue 時，到 .nuxt 裡面的 imports.d.ts 就可以看到 nuxt 如何自動引入，如果是 #app 開頭的就對應使用 #imports

Could not resolve "#**imports"**

如果使用 #imports 的方法，出現找不到 #imports 時

 **Could not resolve "#**imports**"**

可以設定

//module.ts
_nuxt.options.build.transpile.push("#imports")

這個情況目前出現在 layout 的部份有使用到 #imports 時

相關 issue 討論 https://github.com/nuxt/nuxt/issues/21497

Module Anatomy: https://nuxt.com/docs/guide/going-further/modules#module-anatomy