{"id":47916357,"url":"https://github.com/monterail/vue-plugin-template","last_synced_at":"2026-04-04T05:38:31.644Z","repository":{"id":333746034,"uuid":"1121007841","full_name":"monterail/vue-plugin-template","owner":"monterail","description":"📝 A comprehensive template for creating Vue 3 plugins with TypeScript, testing, and development tools pre-configured.","archived":false,"fork":false,"pushed_at":"2026-03-26T11:41:45.000Z","size":263,"stargazers_count":35,"open_issues_count":5,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T05:39:25.369Z","etag":null,"topics":["ci","eslint","plugin","prettier","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monterail.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-22T09:40:43.000Z","updated_at":"2026-02-20T00:35:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/monterail/vue-plugin-template","commit_stats":null,"previous_names":["monterail/vue-plugin-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/monterail/vue-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monterail%2Fvue-plugin-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monterail%2Fvue-plugin-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monterail%2Fvue-plugin-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monterail%2Fvue-plugin-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monterail","download_url":"https://codeload.github.com/monterail/vue-plugin-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monterail%2Fvue-plugin-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31389391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T04:26:24.776Z","status":"ssl_error","status_checked_at":"2026-04-04T04:23:34.147Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci","eslint","plugin","prettier","typescript","vue"],"created_at":"2026-04-04T05:38:30.974Z","updated_at":"2026-04-04T05:38:31.626Z","avatar_url":"https://github.com/monterail.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Plugin Template\n\nA comprehensive template for creating Vue 3 plugins with TypeScript, testing, and development tools pre-configured.\n\n## 🚀 Features\n\n- ✅ **Vue 3** support with TypeScript\n- ✅ **Local playground** for testing your plugin during development\n- ✅ **Unit testing** with Vitest and Vue Test Utils\n- ✅ **Linting** with ESLint and Prettier\n- ✅ **GitHub Actions** CI/CD pipeline\n- ✅ **Build configuration** for npm package publishing\n- ✅ **Example components** and composables\n\n## 🏁 Getting Started\n\n### 1. Clone this template\n\n```bash\ngit clone https://github.com/monterail/vue-plugin-template.git\ncd vue-plugin-template\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n```\n\n### 3. Customize your plugin\n\nUpdate the following files:\n\n- `package.json` - Change name, description, author, etc.\n- `src/index.ts` - Rename your plugin and customize functionality\n- `src/components/` - Add or modify components\n- `src/composables/` - Add or modify composables\n- `README.md` - Update documentation for your plugin\n\n### 4. Start development\n\n```bash\n# Run the playground for local development\nnpm run dev\n\n# Or run tests in watch mode\nnpm run test:watch\n```\n\n## 🛠️ Development\n\n### Basic Plugin Structure\n\n```typescript\n// src/index.ts\nimport type { App, Plugin } from 'vue'\n\nexport interface MyPluginOptions {\n  // Your options here\n}\n\nconst MyPlugin: Plugin = {\n  install(app: App, options: MyPluginOptions = {}) {\n    // Register components\n    app.component('MyComponent', MyComponent)\n    \n    // Add global properties\n    app.config.globalProperties.$myPlugin = {\n      // Your global methods\n    }\n    \n    // Provide data\n    app.provide('myData', someData)\n  }\n}\n\nexport default MyPlugin\n```\n\n### Registering Components\n\n```typescript\n// Register globally\napp.component('MyComponent', MyComponent)\n\n// Register with prefix\nconst prefix = options.prefix || 'My'\napp.component(`${prefix}Component`, MyComponent)\n```\n\n### Adding Global Properties\n\n```typescript\napp.config.globalProperties.$myPlugin = {\n  greet: (name: string) =\u003e `Hello, ${name}!`\n}\n\n// TypeScript types\ndeclare module '@vue/runtime-core' {\n  export interface ComponentCustomProperties {\n    $myPlugin: {\n      greet: (name: string) =\u003e string\n    }\n  }\n}\n```\n\n### Creating Composables\n\n```typescript\n// src/composables/useMyPlugin.ts\nimport { ref, computed } from 'vue'\n\nexport function useMyPlugin() {\n  const count = ref(0)\n  const double = computed(() =\u003e count.value * 2)\n  \n  const increment = () =\u003e count.value++\n  \n  return { count, double, increment }\n}\n```\n\n## 🔧 Using Your Published Plugin\n\nOnce published, users can install and use your plugin:\n\n```bash\nnpm install your-plugin-name\n```\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport MyPlugin from 'your-plugin-name'\n\nconst app = createApp(App)\n\napp.use(MyPlugin, {\n  // Plugin options\n})\n\napp.mount('#app')\n```\n\n```vue\n\u003c!-- Using in components --\u003e\n\u003ctemplate\u003e\n  \u003cMyComponent /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { useMyPlugin } from 'your-plugin-name'\n\nconst { count, increment } = useMyPlugin()\n\u003c/script\u003e\n```\n\n## 📦 Publishing to npm\n\nBefore publishing your plugin to npm, make sure you've:\n\n1. **Updated `package.json`** with your plugin details:\n   - Change `name` to your package name\n   - Update `version`, `description`, `author`, and `keywords`\n   - Set `repository` URL if applicable\n\n2. **Built your plugin**:\n   ```bash\n   npm run build\n   ```\n\n3. **Tested thoroughly**:\n   ```bash\n   npm test\n   ```\n\n4. **Log in to npm** (if not already logged in):\n   ```bash\n   npm login\n   ```\n\n5. **Publish to npm**:\n   ```bash\n   npm publish\n   ```\n\n\u003e **Note:** The `prepublishOnly` script will automatically run the build before publishing.\n\n## 🌟 Showcase Your Plugin\n\nAfter publishing your plugin, consider adding it to [vue-plugins.org](https://www.vue-plugins.org/) - a curated directory of Vue.js plugins and libraries. It's a great way to:\n\n- 📣 **Increase visibility** - Get your plugin discovered by the Vue community\n- 🎯 **Reach your audience** - Connect with developers looking for Vue plugins\n- 🏆 **Build credibility** - Be part of a trusted resource for Vue developers\n- 📊 **Track adoption** - See how your plugin is being used\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT\n\n## 🙏 Acknowledgments\n\nBuilt with:\n- [Vue 3](https://vuejs.org/)\n- [Vite](https://vitejs.dev/)\n- [Vitest](https://vitest.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Vue Test Utils](https://test-utils.vuejs.org/)\n\n---\n\n**Happy plugin building! 🎉**\n\nIf you find this template helpful, please give it a ⭐️ on GitHub!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonterail%2Fvue-plugin-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonterail%2Fvue-plugin-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonterail%2Fvue-plugin-template/lists"}