Vue Academy · Lesson

Vite Ecosystem: Plugins and Tooling

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

Lesson 2 of 413 steps

Vite Ecosystem: Plugins and Tooling is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Vue Academy learning path, including “Vite Ecosystem: Plugins and Tooling”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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