Vue Plugin Template

A comprehensive template for creating Vue 3 plugins with TypeScript, testing, and development tools pre-configured.

🚀 Features

• ✅ Vue 3 support with TypeScript
• ✅ Local playground for testing your plugin during development
• ✅ Unit testing with Vitest and Vue Test Utils
• ✅ Linting with ESLint and Prettier
• ✅ GitHub Actions CI/CD pipeline
• ✅ Build configuration for npm package publishing
• ✅ Example components and composables

🏁 Getting Started

1. Clone this template

git clone https://github.com/monterail/vue-plugin-template.git
cd vue-plugin-template

2. Install dependencies

npm install

3. Customize your plugin

Update the following files:

• package.json - Change name, description, author, etc.
• src/index.ts - Rename your plugin and customize functionality
• src/components/ - Add or modify components
• src/composables/ - Add or modify composables
• README.md - Update documentation for your plugin

4. Start development

# Run the playground for local development
npm run dev

# Or run tests in watch mode
npm run test:watch

🛠️ Development

Basic Plugin Structure

// src/index.ts
import type { App, Plugin } from 'vue'

export interface MyPluginOptions {
  // Your options here
}

const MyPlugin: Plugin = {
  install(app: App, options: MyPluginOptions = {}) {
    // Register components
    app.component('MyComponent', MyComponent)
    
    // Add global properties
    app.config.globalProperties.$myPlugin = {
      // Your global methods
    }
    
    // Provide data
    app.provide('myData', someData)
  }
}

export default MyPlugin

Registering Components

// Register globally
app.component('MyComponent', MyComponent)

// Register with prefix
const prefix = options.prefix || 'My'
app.component(`${prefix}Component`, MyComponent)

Adding Global Properties

app.config.globalProperties.$myPlugin = {
  greet: (name: string) => `Hello, ${name}!`
}

// TypeScript types
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $myPlugin: {
      greet: (name: string) => string
    }
  }
}

Creating Composables

// src/composables/useMyPlugin.ts
import { ref, computed } from 'vue'

export function useMyPlugin() {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  
  const increment = () => count.value++
  
  return { count, double, increment }
}

🔧 Using Your Published Plugin

Once published, users can install and use your plugin:

npm install your-plugin-name

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from 'your-plugin-name'

const app = createApp(App)

app.use(MyPlugin, {
  // Plugin options
})

app.mount('#app')

<!-- Using in components -->
<template>
  <MyComponent />
</template>

<script setup>
import { useMyPlugin } from 'your-plugin-name'

const { count, increment } = useMyPlugin()
</script>

📦 Publishing to npm

Before publishing your plugin to npm, make sure you've:

1. Updated package.json with your plugin details:

   • Change name to your package name
   • Update version, description, author, and keywords
   • Set repository URL if applicable

2. Built your plugin:

   npm run build

3. Tested thoroughly:

   npm test

4. Log in to npm (if not already logged in):

   npm login

5. Publish to npm:

   npm publish

Note: The prepublishOnly script will automatically run the build before publishing.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT

🙏 Acknowledgments

Built with:

• Vue 3
• Vite
• Vitest
• TypeScript
• Vue Test Utils

---

Happy plugin building! 🎉

If you find this template helpful, please give it a ⭐️ on GitHub!