如何将 nuxt 模块提供的可组合项添加到自动导入？

Question

我想从自定义 nuxt 模块添加可组合项，并在组件中使用它们而无需导入。

现在我必须使用#import，因为没有它我会收到错误（500 - useTest 未定义）。我有这样的东西，有什么想法可以实现这个目标吗？

// src/module.ts
import { fileURLToPath } from "url";
import {
  defineNuxtModule,
  addPlugin,
  createResolver,
  addComponent,
  addImportsDir,
} from "@nuxt/kit";

export interface ModuleOptions {
  addPlugin: boolean;
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  defaults: {
    addPlugin: true,
  },
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);
    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));

    addImportsDir(resolve(runtimeDir, "composables"));
  },
});

// src/runtime/composables/useTest.ts
export function useTest() {
  console.log("run useTest");

  return {
    test: () => {
      console.log("run test method provided by useTest");
    },
  };
}

// playground/app.vue
<template>
  <div>
    Nuxt module playground!
  </div>
</template>

<script setup>
import { useTest } from "#imports"; // <--------- I would like remove this line
useTest();
</script>

Answer 1

有同样的问题。我不知道为什么 addImportsDir 不能按预期工作。这是我的解决方法：

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  defaults: {
    addPlugin: true,
  },
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);
    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));

    // addImportsDir(resolve(runtimeDir, "composables"));

    nuxt.hook('nitro:config', (nitroConfig) => {
      if (!nitroConfig.imports) {
        nitroConfig.imports = {
          imports: [],
        };
      }

      nitroConfig.imports.imports.push({
        name: 'useTest',
        as: 'useTest',
        from: join(runtimeDir, 'composables/useTest'),
      });
    });
  },
});