shared
使用 shared/ 目錄在 Vue 應用程式和 Nitro 伺服器之間共享功能。
shared/ 目錄允許您共享可用於 Vue 應用程式和 Nitro 伺服器兩者的程式碼。
shared/ 目錄在 Nuxt v3.14+ 版本中可用。shared/ 目錄中的程式碼無法匯入任何 Vue 或 Nitro 程式碼。在 Nuxt v3 中，預設未啟用自動匯入，以防止現有專案發生重大變更。若要使用這些自動匯入的 utils 和 types，您必須先在您的
nuxt.config.ts 中設定 future.compatibilityVersion: 4。用法
方法 1：具名匯出
shared/utils/capitalize.ts
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
方法 2：預設匯出
shared/utils/capitalize.ts
export default function (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
您現在可以在您的 Nuxt 應用程式和 server/ 目錄中使用自動匯入的工具程式。
app.vue
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
server/api/hello.get.ts
export default defineEventHandler((event) => {
return {
hello: capitalize('hello')
}
})
檔案掃描方式
只有在 shared/utils/ 和 shared/types/ 目錄中的檔案才會自動匯入。除非您將這些目錄新增至 imports.dirs 和 nitro.imports.dirs，否則巢狀於這些目錄子目錄中的檔案將不會自動匯入。
目錄結構
-| shared/
---| capitalize.ts # Not auto-imported
---| formatters
-----| lower.ts # Not auto-imported
---| utils/
-----| lower.ts # Auto-imported
-----| formatters
-------| upper.ts # Not auto-imported
---| types/
-----| bar.d.ts # Auto-imported
您在 shared/ 資料夾中建立的任何其他檔案都必須使用 #shared 別名（由 Nuxt 自動配置）手動匯入
// For files directly in the shared directory
import capitalize from '#shared/capitalize'
// For files in nested directories
import lower from '#shared/formatters/lower'
// For files nested in a folder within utils
import upper from '#shared/utils/formatters/upper'
此別名確保整個應用程式中的匯入一致性，無論匯入檔案的位置在哪裡。