如何将 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'),
      });
    });
  },
});

Answer 2

我在 GitHub 上提出了一个关于这个的问题，这里是解决方案：

https://github.com/nuxt/starter/issues/261

您在模块启动器中遇到这种情况，因为我们 在开发模块时故意禁用自动导入：

https://github.com/nuxt/starter/blob/module/.nuxtrc#L1

问题是自动导入在 node_modules 中不起作用，所以它是 模块作者很容易在他们的运行时依赖自动导入 开发模块时的代码。

当前的解决方法：

要使其正常工作，只需编辑

.nuxtrc

并将

imports.autoImport=false

更改为

imports.autoImport=true

一个pr已获准更新文档：https://github.com/nuxt/nuxt/pull/19219