當使用者填寫表單並按下提交按鈕時，我們需要檢查他們的輸入內容，以確保資料的正確性。

這包括確認欄位是否為空白、檢查輸入是否符合預期的格式與規則等等。這類檢查屬於無狀態的邏輯，通常不依賴於任何狀態或資料，我會將它放在 utils 中以便重複利用。而 Nuxt 會自動引入放在 utils 中的邏輯。

例如: 有一個驗證 email 的 function，我想把它放在 module 內作為 module 的一部分，讓使用者可以在無須引入 function 的情況下自由取用

// utils/check-email.ts
export function emailChecker (str: string, length = 256): {
    success: boolean
    error?: string
  } {
    if (str.length === 0) return { success: false, error: '請輸入電子信箱' }
    if (!/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/.test(str)) return { success: false, error: '請輸入有效的電子信箱' }
    if (str.length > length) return { success: false, error: `字元最大長度${length}` }

    return { success: true }
  } 

step 1: 建立 src/runtime/utils/check-email.ts 並將上面的 emailChecker 複製貼上

step 2: 到 module.ts引入 addImportsDir

import { addImportsDir } from '@nuxt/kit'

step 3: addImportsDir抓取想要自動引入的資料夾

addImportsDir(resolver.resolve("./runtime", "utils"))

step4: 新增 playground/pages/addImportsDir.vue

我在這邊做了一個簡單的 email 表單
剛剛製作的 emailChecker 就無需引入，直接呼叫就可以了!

// playground.pages/addImportsDir.vue
<script lang="ts" setup>
const input = reactive({
  value: '',
  error: '',
})

const validate = () => {
  input.error = emailChecker(input.value).error
}
</script>

<template>
  <div class="w-full h-screen bg-black flex justify-center items-center">
    <div class="w-80 bg-slate-50 p-8 rounded-md flex flex-col gap-y-8">
      <Input
        v-model="input.value"
        label="Email"
        :error="input.error"
      />
      <Button @click="validate" text="Submit" />
    </div>
  </div>
</template>

addImportsDir: https://nuxt.com/docs/api/kit/autoimports