create script for generating a vue plugin or library

setup-vue-library.sh

@@ -0,0 +1,167 @@
+#!/bin/bash
+# This script sets up a Vue 3 + TypeScript library project ready for development
+# and eventual building & publishing of your distributable component(s).
+
+# 1. Create your project folder.
+read -p "Enter your project folder name: " project_folder
+mkdir "$project_folder"
+cd "$project_folder" || exit
+
+# 2. Initialize a new npm package.
+npm init -y
+
+# 3. Install needed dependencies.
+#   - vue: The Vue framework (we install version 3)
+#   - typescript: For TS support
+#   - vite and @vitejs/plugin-vue: For development and build tooling
+npm install vue@3
+npm install -D typescript vite @vitejs/plugin-vue
+
+# 4. Create the src folder and add a minimal component and entry point.
+mkdir src
+
+# Create a sample Vue component (MyComponent.vue)
+cat > src/MyComponent.vue <<'EOF'
+<template>
+  <div>
+    <!-- Your component markup -->
+    Hello from MyComponent!
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'MyComponent'
+});
+</script>
+
+<style scoped>
+/* Your component styles */
+</style>
+EOF
+
+# Create an index entry file that exports your component (or library)
+cat > src/index.ts <<'EOF'
+import { App, Plugin } from 'vue';
+import MyComponent from './MyComponent.vue';
+
+const MyLibrary: Plugin = {
+  install(app: App) {
+    app.component('MyComponent', MyComponent);
+  }
+};
+
+export { MyComponent };
+export default MyLibrary;
+EOF
+
+# 5. Create a tsconfig.json file for TypeScript configuration.
+cat > tsconfig.json <<'EOF'
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["ESNext", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}
+EOF
+
+# 6. Set up Vite for library mode by creating vite.config.ts.
+cat > vite.config.ts <<'EOF'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      // Set the entry point for our library
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'MyLibrary',
+      formats: ['es', 'umd'],
+      // Customize file names for the dist outputs.
+      fileName: (format) => \`index.\${format}.js\`
+    },
+    rollupOptions: {
+      // Ensure vue is treated as an external dependency.
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    }
+  }
+});
+EOF
+
+# 7. Update package.json using a Node.js script.
+# Create update-package.js to modify package.json accordingly.
+cat > update-package.js <<'EOF'
+const fs = require('fs');
+
+const pkgFile = 'package.json';
+const pkg = JSON.parse(fs.readFileSync(pkgFile, {encoding: 'utf-8'}));
+
+// Update package.json fields needed for a distributable library.
+pkg.main = 'dist/index.umd.js';
+pkg.module = 'dist/index.es.js';
+pkg.types = 'dist/index.d.ts';
+pkg.files = ['dist'];
+pkg.scripts = pkg.scripts || {};
+pkg.scripts.build = 'vite build';
+pkg.peerDependencies = {
+  vue: '^3.0.0'
+};
+
+fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2));
+EOF
+
+# Run the Node.js script to update package.json.
+node update-package.js
+
+# Remove the update script after running.
+rm update-package.js
+
+# 8. Create a basic README file.
+cat > README.md <<'EOF'
+# Vue 3 Component Library
+
+This project is set up as a library of Vue 3 components written in TypeScript.
+
+## Development
+
+- Add your components in the src folder.
+- Build the library with: npm run build
+
+## Usage
+
+After publishing, install via npm and register the library as a Vue plugin:
+  import { createApp } from 'vue'
+  import MyLibrary from 'your-library-name'
+  import App from './App.vue'
+
+  const app = createApp(App);
+  app.use(MyLibrary);
+  app.mount('#app');
+EOF
+
+echo "Setup complete!"
+echo "Next steps:"
+echo "1. Customize your component(s) in the src folder."
+echo "2. Run 'npm run build' to build distributable files into the dist folder."
+echo "3. Publish your package to npm as desired."