Vue Academy · Lesson

Vite Ecosystem: Plugins and Tooling

unplugin ecosystem, vite-plugin-vue, vite-plugin-inspect, vite-bundle-visualizer.

Vite Ecosystem: Plugins and Tooling is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Vite Plugin Ecosystem

Vite's plugin system (built on Rollup's interface plus Vite-specific hooks) powers a rich ecosystem. For Vue projects, a few plugins dramatically improve developer experience: auto-imports, auto component registration, transform inspection, and bundle analysis.

unplugin-auto-import

unplugin-auto-import automatically imports common APIs (Vue's ref, computed, Router/Pinia helpers, your own composables) so you can use them without writing import statements.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

Auto-Importing Your Composables

Point it at your composables directory and those functions become globally available too. It generates a .d.ts so TypeScript and your editor still understand them.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components auto-imports and registers components on demand — drop <MyButton /> in a template and the plugin imports it automatically. It also tree-shakes unused components.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

Resolvers for UI Libraries

The components plugin supports resolvers for popular UI libraries (Element Plus, Vuetify, Naive UI), auto-importing their components and styles on use — no manual registration.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect exposes a UI to see how each plugin transforms your code through the pipeline. It is invaluable for debugging why a file ends up the way it does.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

Reading the Transform Pipeline

In the Inspect UI you pick a module and step through each plugin's transform. You can see, for example, how the Vue SFC is split into render/script and how auto-import injects code — pinpointing misbehaving plugins.

Bundle Visualizer

To understand production bundle size, use a visualizer plugin (e.g. rollup-plugin-visualizer). It generates an interactive treemap of what is in each chunk after build.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

Acting on Visualizer Insights

Use the treemap to spot oversized dependencies and duplicated packages. Common fixes: lazy-load heavy routes/components, switch to lighter libraries, or configure manualChunks to split vendor code.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

Combining the Plugins

These plugins compose well. A typical Vue config layers auto-import, components, inspect (dev-only), and a visualizer (build-only) together for the smoothest workflow.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

Keep dts Files in Git Ignore Awareness

Auto-import and components plugins generate .d.ts files. Decide whether to commit them (helps CI type-check without a build) or gitignore them (regenerated on dev start). Keep them in tsconfig includes either way.

Quick Check

Test your understanding of the Vite tooling ecosystem.

Recap

You learned the Vite tooling ecosystem:

unplugin-auto-import — auto-import Vue APIs and composables
unplugin-vue-components — auto component import/registration, with UI resolvers
vite-plugin-inspect — view how plugins transform each module
bundle visualizer — treemap of chunk contents to guide optimization
These plugins compose into a smooth Vue dev/build workflow

Frequently asked questions

Is the “Vite Ecosystem: Plugins and Tooling” lesson free?

Yes — the full text of “Vite Ecosystem: Plugins and Tooling” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Vite Ecosystem: Plugins and Tooling”?

unplugin ecosystem, vite-plugin-vue, vite-plugin-inspect, vite-bundle-visualizer. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Vite Ecosystem: Plugins and Tooling” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Vue Vapor Mode: Compile-Time Optimization
Vite Ecosystem: Plugins and Tooling
Vue Macros and Community Proposals
Choosing the Right Vue Stack for 2025+

← Back to Vue Academy