Suggest an edit

Improve this article

Refine the answer for “What is a plugin in Vite?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

A **plugin in Vite** is a module that extends or changes the bundler's behavior. It works roughly like plugins in Rollup (on which Vite is based) and can hook into different stages: from loading source files to generating the final output.

---

### Main tasks of plugins:

- adding support for new formats (for example, Markdown, SVG as a component)
- optimizing code, minifying it, injecting environment variables
- changing module imports/exports
- connecting external tools (PostCSS, ESLint, PWA, etc.)

---

### Example plugin structure:

```js
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.txt')) {
        return `export default ${JSON.stringify(code)}`
      }
    }
  }
}
```

---

### How they are connected:

Plugins are added in `vite.config.js`:

```js
import myPlugin from './myPlugin.js'

export default {
  plugins: [myPlugin()]
}
```

---

**Summary:**
A plugin in Vite is a function that connects to the build lifecycle and lets you change how Vite works or add new capabilities.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts159 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.