tessl/npm-unplugin-vue-components

Vue component auto-importing plugin for multiple build tools including Vite, Webpack, Rollup, and esbuild

—

Pending

Overview

Eval results

Files

Nuxt Integration

Name: tessl/npm-unplugin-vue-components
Author: tessl

Dedicated Nuxt module providing seamless integration with Nuxt's auto-import system and server-side rendering support.

Capabilities

Nuxt Module Setup

Dedicated Nuxt module that integrates with both Vite and Webpack configurations automatically.

/**
 * Nuxt module for unplugin-vue-components
 * @param options - Plugin configuration options
 * @returns Nuxt module definition
 */
declare function NuxtModule(options?: Options): NuxtModule;

/**
 * Nuxt module configuration in nuxt.config.ts
 */
interface NuxtConfig {
  modules: string[];
  components?: ComponentsModuleOptions;
}

interface ComponentsModuleOptions extends Options {
  /** Nuxt-specific component configuration */
  nuxtSpecific?: boolean;
}

Usage Examples:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  // Optional: Configure via components key
  components: {
    dirs: ["components", "~/components/ui"],
    extensions: ["vue"],
    dts: true,
  },
});

// Alternative: Direct module configuration
export default defineNuxtConfig({
  modules: [
    ["unplugin-vue-components/nuxt", {
      dirs: ["components"],
      resolvers: [ElementPlusResolver()],
    }],
  ],
});

Server-Side Rendering Support

Full SSR compatibility with proper hydration and server-side component resolution.

/**
 * SSR-specific configuration options
 */
interface SSROptions {
  /** Enable SSR mode for compatible resolvers */
  ssr?: boolean;
  /** Server-side component resolution */
  serverComponents?: boolean;
}

Usage Examples:

// nuxt.config.ts with SSR configuration
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    
    // SSR-compatible resolvers
    resolvers: [
      ElementPlusResolver({
        ssr: true, // Use CommonJS for SSR
        importStyle: "css", // Use CSS instead of Sass for SSR
      }),
    ],
    
    dts: true,
  },
  
  ssr: true, // Nuxt SSR enabled
});

Nuxt Auto-Import Integration

Seamless integration with Nuxt's built-in auto-import system.

/**
 * Nuxt auto-import integration options
 */
interface NuxtAutoImportOptions {
  /** Integration with Nuxt's auto-imports */
  nuxtAutoImports?: boolean;
  /** Global component registration */
  globalComponents?: boolean;
}

Usage Examples:

// Automatic integration with Nuxt auto-imports
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: [
      "components", // Standard Nuxt components directory
      "~/components/ui", // Additional UI components
      "~/components/layout", // Layout components
    ],
    
    // Works alongside Nuxt's built-in component auto-import
    directoryAsNamespace: false, // Let Nuxt handle namespacing
    global: true, // Register components globally
  },
});

Layer Support

Support for Nuxt layers and component inheritance.

Usage Examples:

// nuxt.config.ts in base layer
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components/base"],
    resolvers: [ElementPlusResolver()],
  },
});

// nuxt.config.ts in extending project  
export default defineNuxtConfig({
  extends: ["./layers/base"],
  
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: [
      "components", // Project-specific components
      "components/override", // Override base layer components
    ],
    allowOverrides: true, // Allow overriding base layer components
  },
});

Development vs Production

Different configurations for development and production in Nuxt context.

Usage Examples:

export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    
    // Development-specific options
    ...(process.env.NODE_ENV === "development" && {
      dts: true,
      allowOverrides: true,
      sourcemap: true,
    }),
    
    // Production-specific options
    ...(process.env.NODE_ENV === "production" && {
      dts: false, // Skip in production build
      sourcemap: false,
    }),
    
    resolvers: [
      ElementPlusResolver({
        importStyle: process.env.NODE_ENV === "development" ? "sass" : "css",
      }),
    ],
  },
});

Nuxt DevTools Integration

Integration with Nuxt DevTools for component inspection and debugging.

Usage Examples:

export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  devtools: { enabled: true },
  
  components: {
    dirs: ["components"],
    dts: true, // Required for DevTools component inspection
    
    // Enhanced debugging information
    dumpComponentsInfo: process.env.NODE_ENV === "development",
  },
});

TypeScript Configuration for Nuxt

Optimal TypeScript setup for Nuxt projects using unplugin-vue-components.

/**
 * Nuxt TypeScript integration
 */
interface NuxtTypeScriptOptions {
  /** Generate .nuxt/components.d.ts */
  dts?: boolean | string;
  /** TypeScript strict mode compatibility */
  strict?: boolean;
}

Usage Examples:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  typescript: {
    strict: true,
    typeCheck: true,
  },
  
  components: {
    dirs: ["components"],
    dts: true, // Generates .nuxt/components.d.ts
    
    resolvers: [
      ElementPlusResolver(),
      AntDesignVueResolver(),
    ],
  },
});

// .nuxt/components.d.ts will be automatically generated
// and included in TypeScript compilation

Nuxt 3 Composition API

Optimal configuration for Nuxt 3 with Composition API and script setup.

Usage Examples:

// nuxt.config.ts for Nuxt 3
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    
    // Nuxt 3 optimizations
    version: 3,
    transformer: "vue3",
    transformerUserResolveFunctions: true,
    
    // Full TypeScript support
    dts: true,
  },
});

// In your Nuxt 3 pages/components
// <script setup lang="ts">
// // Components auto-imported with full typing
// const title = "My Page";
// </script>
//
// <template>
//   <div>
//     <MyComponent :title="title" />
//     <ElButton type="primary">Click me</ElButton>
//   </div>
// </template>

Module Options vs Components Config

Different ways to configure the module in Nuxt.

Usage Examples:

// Method 1: Direct module configuration
export default defineNuxtConfig({
  modules: [
    ["unplugin-vue-components/nuxt", {
      dirs: ["components"],
      resolvers: [ElementPlusResolver()],
      dts: true,
    }],
  ],
});

// Method 2: Components configuration key (recommended)
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    resolvers: [ElementPlusResolver()],
    dts: true,
  },
});

// Method 3: Runtime configuration
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  runtimeConfig: {
    components: {
      // Runtime-specific component settings
    },
  },
  
  components: {
    dirs: ["components"],
  },
});

Nuxt Compatibility

Version compatibility and migration guidance.

Usage Examples:

// Nuxt 2 configuration (legacy)
export default {
  buildModules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    version: 2,
    transformer: "vue2",
  },
};

// Nuxt 3 configuration (current)
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    version: 3,
    transformer: "vue3",
  },
});

// Nuxt Bridge configuration
export default defineNuxtConfig({
  bridge: true,
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components"],
    version: 2.7, // Vue 2.7 with Composition API
  },
});

Advanced Nuxt Integration

Advanced patterns for complex Nuxt applications.

Usage Examples:

// Multi-tenant Nuxt application
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: [
      "components/shared",
      `components/tenants/${process.env.TENANT}`,
    ],
    allowOverrides: true,
    
    resolvers: [
      // Tenant-specific resolver
      (name: string) => {
        const tenant = process.env.TENANT;
        if (name.startsWith("Tenant")) {
          return {
            name,
            from: `@/components/tenants/${tenant}/${name}.vue`,
          };
        }
      },
    ],
  },
});

// Nuxt with module federation
export default defineNuxtConfig({
  modules: ["unplugin-vue-components/nuxt"],
  
  components: {
    dirs: ["components/local"],
    
    resolvers: [
      // Remote component resolver
      (name: string) => {
        if (name.startsWith("Remote")) {
          return {
            name,
            from: `@remote-app/components/${name}`,
          };
        }
      },
    ],
  },
});

Install with Tessl CLI

npx tessl i tessl/npm-unplugin-vue-components

docs

component-resolution.md

index.md

nuxt-integration.md

plugin-configuration.md

typescript-integration.md

ui-library-resolvers.md

tile.json

tessl/npm-unplugin-vue-components