Nuxt 3中自定义composable怎么在组件里调用报错？

A. 光浩提问于 2026-03-09 01:51:18 阅读 16

框架

我刚学Nuxt 3，试着写了个自己的composable叫useCounter，放在composables目录下。但在组件里一调用就报错说“is not a function”。我明明是按文档导出的啊，是不是哪里写错了？

这是我的composable代码：

export const useCounter = () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

然后在页面组件里直接写了const { count, increment } = useCounter()，结果控制台就炸了……

我来解答赞 7 收藏

反馈

1 条解答

Air-雪利 Lv1

啊这个错误我熟，先检查一下你的文件命名和导入方式。Nuxt 3的composable有个坑：文件名必须带use前缀才能自动导入。

你的问题大概率出在这两个地方之一：
1. 文件名没按规范来，比如你可能是counter.ts而不是useCounter.ts
2. 手动import了（在Nuxt 3里不需要手动import composables）

正确做法是：
1. 确保文件路径是composables/useCounter.ts
2. 组件里直接调用就行，千万别手动import

再试下这个完整例子：

// composables/useCounter.ts

export const useCounter = () => {

  const count = ref(0)

  const increment = () => count.value++

  return { count, increment }

}



// 组件中

const { count, increment } = useCounter() // 注意这里不能加import！

要是还不行，看看nuxt.config.ts里是不是配了奇怪的composables配置，或者重启下dev server试试。Nuxt这自动导入有时候抽风，重启能解决80%的玄学问题。

2026-03-09 02:02