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

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

框架

我刚学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()，结果控制台就炸了……

我来解答赞 12 收藏

反馈

2 条解答

萌新.荣荣 Lv1

你的代码有两个问题。

问题1：ref 没导入

composables 目录下的文件可没有自动导入 ref，得自己手动引：

import { ref } from 'vue'



export const useCounter = () => {

  const count = ref(0)

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

  return { count, increment }

}

问题2：文件名要注意

Nuxt 3 的 composables 自动导入有规则：文件名必须以 use 开头，然后会自动转换成 useXxx 这个函数名。所以你文件应该叫 useCounter.ts 或者 useCounter.js。

如果你是放在 composables/useCounter.ts，然后上面 import 加上，那应该就能跑了。

还有一种情况，如果你用的是 TypeScript，最好加个类型声明：

import { ref } from 'vue'



export const useCounter = () => {

  const count = ref(0)

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

  return { count, increment }

}



// 方便自动导入时类型推断

// export type UseCounterReturn = ReturnType

基本上就是 ref 没 import 导致的，加上就好了。Nuxt 3 的自动导入虽然方便，但 Vue 那些响应式 API 还是得自己引的。

2026-03-18 18:01

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