Components auto imports in Nuxt 3 with modules

Question

I want to use modules (so not the default structure directories) with Nuxt, something like that:

The problem is that I don't know how to configure Nuxt or my module to auto import the components in nested folders like the Card folders. For example the PlanChoiceCard.vue component is auto imported but not NestedComponent.vue

This is my nuxt.config.js:

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  ssr: true,
  ignore: ["node_modules/**/*"],
  plugins: ["~/plugins/vue-i18n.client.ts"],
  runtimeConfig: {
    public: {
      myapp: {
        version: "1.7.8.2",
      },
    },
  },
  modules: ["./modules/Plans"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: ["~/assets/css/tailwind.css"],
});

and the configuration of the Plans module:

import path from "path";
import { defineNuxtModule } from "@nuxt/kit";

export default defineNuxtModule({
  // Default configuration options for your module
  defaults: {},
  hooks: {
    // ROUTES
    "pages:extend"(pages) {
      pages.push({
        name: "user",
        path: "/",
        file: path.resolve(__dirname, "./views/PlanChoices.vue"),
      });
    },

    // COMPONENTS
    "components:dirs"(dirs) {
      // Add ./components dir to the list
      dirs.push({
        path: path.resolve(__dirname, "./components"),
      });
    },

    // COMPOSABLES
    // "autoImports:dirs"(dirs) {
    //  dirs.push(path.resolve(__dirname, "./composables"));
    // },
  },
  async setup(moduleOptions, nuxt) {
    // -- Add your module logic here --
  },
});

Adri HM · Accepted Answer · 2022-07-13T16:34:51.237

The answer was to make the same as in nuxt.config.ts:

from https://stackoverflow.com/a/66336654/10805872

So:

    // COMPONENTS
    "components:dirs"(dirs) {
      // Add ./components dir to the list
      dirs.push({
        path: path.resolve(__dirname, "./components"),
      });
    },

become:

    // COMPONENTS
    "components:dirs"(dirs) {
      // Add ./components dir to the list
      dirs.push({
        path: path.resolve(__dirname, "./components"), pathPrefix: false
      });
    },

With the prefix you have to use it, for example a component in modules/user/localeSwitcher.vue, as <user-locale-switcher />

Without prefix so pathPrefix: false, you can use directly <locale-switcher />

Components auto imports in Nuxt 3 with modules

1 Answers1