vue-plugin-template-test 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,181 @@
+# 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
+
+```bash
+git clone https://github.com/monterail/vue-plugin-template.git
+cd vue-plugin-template
+```
+
+### 2. Install dependencies
+
+```bash
+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
+
+```bash
+# Run the playground for local development
+npm run dev
+
+# Or run tests in watch mode
+npm run test:watch
+```
+
+## 🛠️ Development
+
+### Basic Plugin Structure
+
+```typescript
+// 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
+
+```typescript
+// Register globally
+app.component('MyComponent', MyComponent)
+
+// Register with prefix
+const prefix = options.prefix || 'My'
+app.component(`${prefix}Component`, MyComponent)
+```
+
+### Adding Global Properties
+
+```typescript
+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
+
+```typescript
+// 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:
+
+```bash
+npm install your-plugin-name
+```
+
+```typescript
+// 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')
+```
+
+```vue
+<!-- Using in components -->
+<template>
+  <MyComponent />
+</template>
+
+<script setup>
+import { useMyPlugin } from 'your-plugin-name'
+
+const { count, increment } = useMyPlugin()
+</script>
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT
+
+## 🙏 Acknowledgments
+
+Built with:
+- [Vue 3](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+- [Vitest](https://vitest.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vue Test Utils](https://test-utils.vuejs.org/)
+
+---
+
+**Happy plugin building! 🎉**
+
+If you find this template helpful, please give it a ⭐️ on GitHub!

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r={class:"my-component"},s=e.defineComponent({__name:"MyComponent",props:{title:{default:"My Component"},message:{default:"This is a sample component from the Vue plugin template"},buttonText:{default:"Click me"}},emits:["click"],setup(t,{emit:n}){const o=n,l=e.ref(0),c=()=>{l.value++,o("click",`Button clicked ${l.value} times`)};return(u,f)=>(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("h2",null,e.toDisplayString(t.title),1),e.createElementVNode("p",null,e.toDisplayString(t.message),1),e.createElementVNode("button",{onClick:c},e.toDisplayString(t.buttonText),1)]))}}),m=(t,n)=>{const o=t.__vccOpts||t;for(const[l,c]of n)o[l]=c;return o},i=m(s,[["__scopeId","data-v-9516f9b4"]]);function a(){const t=e.inject("myPluginPrefix","Default"),n=e.ref(0),o=e.computed(()=>n.value*2);return{prefix:t,count:n,doubleCount:o,increment:()=>{n.value++},decrement:()=>{n.value--},reset:()=>{n.value=0}}}const p={install(t,n={}){const{prefix:o="My",globalProperty:l=!0}=n;t.component(`${o}Component`,i),l&&(t.config.globalProperties.$myPlugin={greet:c=>`Hello from MyPlugin, ${c}!`}),t.provide("myPluginPrefix",o)}};exports.MyComponent=i;exports.MyPlugin=p;exports.useMyPlugin=a;

package/dist/index.mjs

@@ -0,0 +1,55 @@
+import { defineComponent as r, ref as s, createElementBlock as m, openBlock as a, createElementVNode as l, toDisplayString as i, inject as f, computed as p } from "vue";
+const d = { class: "my-component" }, g = /* @__PURE__ */ r({
+  __name: "MyComponent",
+  props: {
+    title: { default: "My Component" },
+    message: { default: "This is a sample component from the Vue plugin template" },
+    buttonText: { default: "Click me" }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const n = t, o = s(0), c = () => {
+      o.value++, n("click", `Button clicked ${o.value} times`);
+    };
+    return (u, k) => (a(), m("div", d, [
+      l("h2", null, i(e.title), 1),
+      l("p", null, i(e.message), 1),
+      l("button", { onClick: c }, i(e.buttonText), 1)
+    ]));
+  }
+}), y = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [o, c] of t)
+    n[o] = c;
+  return n;
+}, v = /* @__PURE__ */ y(g, [["__scopeId", "data-v-9516f9b4"]]);
+function P() {
+  const e = f("myPluginPrefix", "Default"), t = s(0), n = p(() => t.value * 2);
+  return {
+    prefix: e,
+    count: t,
+    doubleCount: n,
+    increment: () => {
+      t.value++;
+    },
+    decrement: () => {
+      t.value--;
+    },
+    reset: () => {
+      t.value = 0;
+    }
+  };
+}
+const _ = {
+  install(e, t = {}) {
+    const { prefix: n = "My", globalProperty: o = !0 } = t;
+    e.component(`${n}Component`, v), o && (e.config.globalProperties.$myPlugin = {
+      greet: (c) => `Hello from MyPlugin, ${c}!`
+    }), e.provide("myPluginPrefix", n);
+  }
+};
+export {
+  v as MyComponent,
+  _ as MyPlugin,
+  P as useMyPlugin
+};

package/dist/vue-plugin-template-test.css

@@ -0,0 +1 @@
+.my-component[data-v-9516f9b4]{padding:1.5rem;border:2px solid #42b883;border-radius:8px;background-color:#f9f9f9;text-align:center;max-width:400px;margin:0 auto}.my-component h2[data-v-9516f9b4]{color:#42b883;margin-top:0}.my-component p[data-v-9516f9b4]{color:#333;line-height:1.6}.my-component button[data-v-9516f9b4]{padding:.5rem 1.5rem;background-color:#42b883;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s}.my-component button[data-v-9516f9b4]:hover{background-color:#35a372}.my-component button[data-v-9516f9b4]:active{transform:translateY(1px)}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue-plugin-template-test",
+  "version": "1.0.0",
+  "description": "A template for creating Vue plugins",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "npm run playground",
+    "playground": "vite --config vite.playground.config.ts",
+    "build": "vite build && vue-tsc --project tsconfig.app.json --emitDeclarationOnly",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "lint": "eslint .",
+    "format": "prettier --write src/ playground/ tests/",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "plugin",
+    "template"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^22.10.5",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/ui": "^2.1.8",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  }
+}