vite-async-component-loader

Vite plugin that easiest way loads component files as asynchronous components.

Usage

It will automatically turn this

<script setup lang="ts">
import LazyComponent from './Component.vue?async'
</script>

<template>
  <LazyComponent />
</template>

into this

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const LazyComponent = defineAsyncComponent(() => import('./Component.vue'))
</script>

<template>
  <LazyComponent />
</template>

Install

npm install -D vite-async-component-loader

Setup

// 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:

/// <reference types="vite-async-component-loader/client" />

License

MIT License © 2023-PRESENT Alex Liu