Vue Async Components

How it works

defineAsyncComponent wraps a component loader. With a bundler, a dynamic import can become a separate chunk. The wrapper also supports loading and error components, delay and timeout options. These are UI boundaries, not a guarantee that the network will always deliver the chunk. The example starts with a closed details area and loads its content only after the button is selected.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css
• src/PacketHelp.vue

Example

<script setup>
import { ref, defineAsyncComponent } from "vue";

const show = ref(false);
const PacketHelp = defineAsyncComponent(() => import("./PacketHelp.vue"));
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="show = true">Open packet help</button
    ><PacketHelp v-if="show" /><output data-result>{{
      show ? "Help requested" : "Help closed"
    }}</output>
  </main>
</template>

Expected result

Opening help displays the dynamically imported note.

The separate SFC is included in the project, and the actual production build verifies that its import resolves. Suspense can coordinate asynchronous dependencies but is an experimental API; evaluate that status and its limitations separately before basing an application contract on it.

src/PacketHelp.vue

<template>
  <aside data-help>Keep the variety label with the packet.</aside>
</template>