How to Build and Publish a Vue 3 Plugin: The Vue Plugin Template

vue-plugin-template is Monterail's free, MIT-licensed starter for building a Vue 3 plugin in TypeScript and publishing it to npm. The build, type declarations, tests, linting, CI, and a local playground are already set up, so your first commit can be about the plugin itself.

If you've built more than one Vue plugin, you've probably noticed a pattern: you keep solving the same boring problems over and over. Project structure, build config, TypeScript setup, docs, npm publishing, examples… none of it is hard, but all of it takes time away from the idea you actually want to ship.

That's exactly the pain that led to vue-plugin-template.

Repo: https://github.com/monterail/vue-plugin-template

This article explains why this template exists, how it relates to our Vue Plugins initiative, and how it fits into the official Vue approach to plugins.

Why do you need a template for Vue plugins?

The official docs show you how to write a Vue plugin, not how to ship one as a package. Vue already has great documentation on plugins. You can read how to create a plugin in the official Vue guide, which usually starts with something like:

export default {
  install(app, options) {
    app.config.globalProperties.$myPlugin = () => {}
  }
}

This is perfect when:

• You’re experimenting

• You’re building something app-specific

• You don’t plan to publish it

But once you want to:

• publish to npm

• support TypeScript properly

• ship ESM + CJS

• provide examples and docs

• keep the API stable

…you’re suddenly far outside the scope of the docs.

That gap is where vue-plugin-template lives.

What is vue-plugin-template?

vue-plugin-template is an opinionated but flexible starting point for Vue 3 plugins that are meant to be published. It covers:

• building Vue 3 plugins

• documenting them

• testing them locally

• publishing them to npm

It gives you a production-ready foundation without locking you into a specific plugin idea, and it uses the same modern Vue tooling your apps probably already run on. Out of the box, you get:

• Vue 3 plugin structure

• TypeScript-first setup

• Vite-based build

• Proper exports for npm

• Example app for local testing

• README structure that doesn’t start empty

All the boring parts are already solved.

How do you start a Vue plugin with vue-plugin-template?

Clone the repo, install dependencies, rename the package, and start the playground. You can have your own plugin running locally in a few minutes:

1. Get the code: git clone https://github.com/monterail/vue-plugin-template.git my-plugin

2. Install dependencies: npm install

3. Make it yours: update name, description, and author in package.json, rename the plugin in src/index.ts, and replace the example components and composables with your own.

4. Develop against a real app: npm run dev starts the playground, and npm run test:watch keeps your tests running alongside it.

5. Ship it: npm login, then npm publish.

Vue plugin npm publishing without pain

Publishing is a single command because the template already handles output formats, exports, and typings. We wanted to remove friction from publishing Vue plugins.

The template is set up so that:

• builds produce correct output formats

• package exports are explicit

• consumers get proper typings

You don't need to Google "Vue plugin npm ESM CJS TypeScript" ever again.

You just:

npm publish

That really is enough, because a prepublishOnly script runs the full build right before upload, so you can't accidentally publish a stale dist. All you need is a package name that isn't already taken on npm and an account you've logged into with npm login.

Why should you use an opinionated template?

Because a template that makes clear decisions saves you from making them yourself. Yes, this template makes some choices for you.

That's intentional.

Templates that try to support every possible approach usually end up helping no one. vue-plugin-template reflects:

• real production usage

• lessons learned from multiple plugins

• alignment with Vue's official APIs

The TypeScript-first choice matches where the community already is: TypeScript is now the top choice for 82% of Vue developers, according to our State of Vue.js Report 2025.

If you don't like the choices we've made, it's still just a template. Fork it, tweak it, own it!

How does vue-plugin-template relate to vue-plugins.org?

The template is where a Vue plugin starts, and vue-plugins.org is where people find it. Vue Plugins is our curated directory of Vue.js plugins. As of September 2026 it lists around 100 plugins across categories like routing, state management, forms, animation, UI frameworks, and testing, sortable by downloads and GitHub stars.

This template is not a random side project. It is the foundation we recommend for every new plugin headed for the directory. The directory is open source too (github.com/monterail/vue-plugins), and its "Create Your Own Plugin" path points straight to this template. Plugins that start here:

• start from the same base

• share the same tooling

• follow the same publishing rules

That consistency makes maintenance easier and contributions less scary. If you've seen one plugin, you've basically seen them all.

Who is vue-plugin-template for?

It's for developers who plan to publish a Vue plugin and would rather skip the setup. This template is a good fit if you:

• plan to publish a Vue plugin

• care about a clean developer experience (DX)

• want to avoid setup fatigue

• like learning from existing, battle-tested patterns

If you're just hacking something inside a single app, the plugins chapter of the official Vue guide is still the best starting point.

Is vue-plugin-template worth using for your next plugin?

If you plan to publish, yes: vue-plugin-template exists to make the right thing the easy thing.

It connects three worlds:

• Vue's official plugin model

• real-world npm distribution

• the Vue Plugins ecosystem

If it saves you even one afternoon of setup work, then our mission has been accomplished.

Feel free to use it, fork it, or improve it. That's exactly why it exists. And if your plugin is one piece of a larger Vue product that needs a team behind it, Monterail's Vue.js developers are happy to help.