如何在Nuxt 3中展示Directus(v9)的Singleton集合页面？

1. 先确认Directus端配置 #

• 确保你的Singleton集合（比如about_us、contacts）已创建完成，并且给Public角色分配了该集合的读权限（在Directus权限设置中操作）。
• 记清集合的API名称（Directus接口请求会用到这个名称，注意和显示名称区分）。

2. 在Nuxt3中获取Singleton数据 #

方法一：页面组件直接请求 #

在Nuxt3的pages/目录下创建对应页面文件，比如pages/about-us.vue、pages/contacts.vue，组件内直接请求数据：

<template>
  <div class="about-page">
    <h1>{{ aboutData.title }}</h1>
    <div v-html="aboutData.content"></div>
  </div>
</template>

<script setup>
import { createDirectus, rest, readItem } from '@directus/sdk'

// 初始化Directus实例
const directus = createDirectus('你的Directus服务地址').with(rest())

// 请求Singleton数据，直接传入集合API名称
const { data: aboutData } = await useAsyncData('about-us', async () => {
  return await directus.request(readItem('about_us'))
})
</script>

方法二：封装通用请求方法（推荐） #

在composables/目录下创建useDirectus.ts，封装通用请求逻辑：

import { createDirectus, rest, readItem } from '@directus/sdk'

export const useDirectus = () => {
  const directus = createDirectus('你的Directus服务地址').with(rest())

  // 获取Singleton数据的通用方法
  const getSingleton = async (collection: string) => {
    return await directus.request(readItem(collection))
  }

  return { getSingleton }
}

然后在页面组件中调用：

<template>
  <div class="contacts-page">
    <h1>{{ contactsData.title }}</h1>
    <p>邮箱：{{ contactsData.email }}</p>
    <p>地址：{{ contactsData.address }}</p>
  </div>
</template>

<script setup>
const { getSingleton } = useDirectus()
const { data: contactsData } = await useAsyncData('contacts', () => getSingleton('contacts'))
</script>

3. 静态生成（SSG）适配 #

如果项目需要静态构建（执行nuxt generate），在nuxt.config.ts中配置预渲染路由：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/about-us',
        '/contacts'
      ]
    }
  }
})

4. 常见问题排查 #

• 检查Directus的Public角色是否拥有目标Singleton集合的读权限。
• 确认请求时使用的集合名称和Directus中设置的API名称完全一致。
• 本地开发时，确保Directus开启了CORS配置，避免跨域请求失败。

内容的提问来源于stack exchange，提问作者Futuris