unimport-loader

A loader that injects auto-imports using unimport. Supports Turbopack (Next.js) and Webpack.

Install

pnpm add -D unimport-loader

Usage

Turbopack (Next.js)

Configure turbopack.rules in next.config.ts and use unimport() as a loader:

// next.config.ts
import type { NextConfig } from 'next'
import { unimport } from 'unimport-loader'

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.{tsx,ts,jsx,js}': {
        condition: { not: 'foreign' },
        loaders: [
          unimport({
            presets: ['react', 'react-dom'],
            dts: true,
            dirs: ['./composables'],
            imports: [
              { name: 'useId', from: 'react' },
            ],
          }),
        ],
      },
    },
  },
}

export default nextConfig

Run dev with Turbopack: next dev --turbopack.

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx|tsx)$/,
        use: [
          {
            loader: 'unimport-loader',
            options: {
              imports: [
                { name: 'ref', from: 'vue' },
                { name: 'computed', from: 'vue' },
              ],
              // or use presets
              presets: ['vue'],
              dts: true, // emit auto-imports.d.ts
            },
          },
        ],
      },
    ],
  },
}

Options

| Option | Type | Description | |--------|------|-------------| | imports | Arrayable<Import \| ImportsMap \| InlinePreset> | Import definitions | | dirs | string[] | Auto-import from directories | | presets | Preset[] | Use unimport presets (e.g. ['vue']) | | dts | string \| boolean | Emit type declarations; true -> auto-imports.d.ts | | logLevel | LogLevel | consola log level |

Note for Developers

This starter recommands using npm Trusted Publisher, where the release is done on CI to ensure the security of the packages.

To do so, you need to run pnpm publish manually for the very first time to create the package on npm, and then go to https://www.npmjs.com/package/<your-package-name>/access to set the connection to your GitHub repo.

Then for the future releases, you can run pnpm run release to do the release and the GitHub Actions will take care of the release process.

License

MIT License © hairy