https://github.com/mini-ghost/vite-async-component-loader
Vite plugin that easiest way loads component files as asynchronous components.
https://github.com/mini-ghost/vite-async-component-loader
Last synced: 6 months ago
JSON representation
Vite plugin that easiest way loads component files as asynchronous components.
- Host: GitHub
- URL: https://github.com/mini-ghost/vite-async-component-loader
- Owner: Mini-ghost
- License: mit
- Created: 2023-04-28T15:04:55.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-01T17:12:54.000Z (over 2 years ago)
- Last Synced: 2025-09-16T19:36:27.769Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 142 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-async-component-loader
[](https://www.npmjs.com/package/vite-async-component-loader)
Vite plugin that easiest way loads component files as asynchronous components.
## Usage
It will automatically turn this
```vue
import LazyComponent from './Component.vue?async'
```
into this
```vue
import { defineAsyncComponent } from 'vue'
const LazyComponent = defineAsyncComponent(() => import('./Component.vue'))
```
## Install
```bash
npm install -D vite-async-component-loader
```
## Setup
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import AsyncComponentLoader from 'vite-async-component-loader'
export default defineConfig({
plugins: [
AsyncComponentLoader()
]
})
```
## Use with TypeScript
We provide a `vite-async-component-loader/client` type declaration file for TypeScript users. You can create an env.d.ts in the src directory so TypeScript picks up the type definitions:
```ts
///
```
## License
[MIT License](https://github.com/Mini-ghost/vite-async-component-loader/blob/main/LICENSE) © 2023-PRESENT [Alex Liu](https://github.com/Mini-ghost)