# rollup-plugin-dynamic-import-components

> Dynamic import VUE components

Latest version **0.1.1** (published 2023-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-dynamic-import-components
pnpm add rollup-plugin-dynamic-import-components
yarn add rollup-plugin-dynamic-import-components
bun add rollup-plugin-dynamic-import-components
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-04-12 |
| First published | 2023-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 7 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | moaumn |
| Maintainers | moaumn |
| Keywords | vue-macros, import-vue-components |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-dynamic-import-components
- Homepage: https://github.com/moaumn/rollup-plugin-dynamic-import-components
- npm.io page: https://npm.io/package/rollup-plugin-dynamic-import-components

## Dependencies (7)

- [typescript](https://npm.io/package/typescript.md) ^5.0.3
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.21.4
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.21.4
- [ast-walker-scope](https://npm.io/package/ast-walker-scope.md) ^0.4.1
- [magic-string-ast](https://npm.io/package/magic-string-ast.md) ^0.1.2
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.47
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.2

## Recent versions

- 0.1.1 (latest) — 2023-04-12
- 0.1.0 — 2023-04-12

## README

# rollup-plugin-dynamic-import-components
动态引入Vue插件

在Vue中使用import()函数动态加载组件时，参数只能是明确的组件文件地址，无法写逻辑动态加载组件，因为编译器在编译时需要获取组件，进行预编译。
使用该插件将动态加载组件的逻辑定义在插件配置中，代码中使用dynamicImportComponents宏，编译前其替换为定义的加载方法的返回值。


1. 配置vite.config.ts
```typescript
import DynamicImportComponentsPluggin from "rollup-plugin-dynamic-import-components";
export default defineConfig({
    plugins:[
        DynamicImportComponentsPluggin({
            // component为自定义的类型，加载方法支持任意多的参数
            'component': (name: string) => {
                return `() => {import('/components/${name}.css'); return import('/components/${name}.vue');}`
            },
            // ... other type config
        })
    ]
});
```

2. 在代码中使用
```typescript
const a = dynamicImportComponents('component', 'button');
```

3. 编译后
```typescript
const a = () => {
    import('/components/button.css');
    return import('/components/button.vue');
}
```

---
_Source: https://npm.io/package/rollup-plugin-dynamic-import-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._