{"_id":"@eldrin-project/eldrin-app-vue","_rev":"3-de6c2a8d7423a2a65e03b5c17dcc229c","name":"@eldrin-project/eldrin-app-vue","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@eldrin-project/eldrin-app-vue","version":"0.0.1","keywords":["eldrin","vue","single-spa","cloudflare","d1"],"author":{"name":"Eldrin Team"},"license":"MIT","_id":"@eldrin-project/eldrin-app-vue@0.0.1","maintainers":[{"name":"tiborkiray","email":"tibor.kiray@gmail.com"}],"dist":{"shasum":"e1517f3fe062d08ae50a356245cef3ada50ada2a","tarball":"https://registry.npmjs.org/@eldrin-project/eldrin-app-vue/-/eldrin-app-vue-0.0.1.tgz","fileCount":8,"integrity":"sha512-ksTUdYz5LeCb82mL0IdFCtuMk8nw8afHshrxHTHa+OofcrqQM4W75Cdd5/oCuqXH6B2X3WsrznbMH6rilk72uw==","signatures":[{"sig":"MEYCIQCcfXCYZZWZRHCMivnberdDC8lspo3DLu9jpxwHALyCYgIhAPLb3vAVeQ0nP2T8SbkYn3sQA3d6MRYPUqVzGfT04eRM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34144},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"2c7e00f9a0a0d4e48af1beb48ba62b01a432f3de","scripts":{"dev":"tsup --watch","lint":"eslint src","build":"tsup","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"tiborkiray","email":"tibor.kiray@gmail.com"},"_npmVersion":"10.9.2","description":"Vue adapter for Eldrin apps providing single-spa lifecycle and database composables","directories":{},"_nodeVersion":"22.14.0","dependencies":{"single-spa-vue":"^3.0.0","@eldrin-project/eldrin-app-core":"^0.0.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","vue-tsc":"^2.2.0","typescript":"^5.8.0","@types/node":"^22.0.0","@cloudflare/workers-types":"^4.20251216.0"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/eldrin-app-vue_0.0.1_1767317989619_0.11053426630624519","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@eldrin-project/eldrin-app-vue","version":"0.0.2","keywords":["eldrin","vue","single-spa","cloudflare","d1"],"author":{"name":"Eldrin Team"},"license":"MIT","_id":"@eldrin-project/eldrin-app-vue@0.0.2","maintainers":[{"name":"tiborkiray","email":"tibor.kiray@gmail.com"}],"dist":{"shasum":"58fddff3b9401faf39a440e5c491ddf13305b5ff","tarball":"https://registry.npmjs.org/@eldrin-project/eldrin-app-vue/-/eldrin-app-vue-0.0.2.tgz","fileCount":2,"integrity":"sha512-vBxTQLBFubcTgVhBMWbboqVOj/EyczHsZ3mWDd7/1nWmvSnZzsdfb8PPDWFJQwA0OEfOrNTt7ykECAfuMVabBw==","signatures":[{"sig":"MEQCIAl8c1/4SC4ulEtd4PTjVEolipxzX1mcuFRi9kT8mlgsAiBdXoAei/oyfNOfkwx9F6SURa5QCzrzK/D1X7Ly5L4/7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9749},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"gitHead":"8535406fe3ace9a9d73818688f47c7b7629c357e","scripts":{"dev":"tsup --watch","lint":"eslint src","build":"tsup","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"tiborkiray","email":"tibor.kiray@gmail.com"},"_npmVersion":"10.9.2","description":"Vue adapter for Eldrin apps providing single-spa lifecycle and database composables","directories":{},"_nodeVersion":"22.14.0","dependencies":{"single-spa-vue":"^3.0.0","@eldrin-project/eldrin-app-core":"^0.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","vue-tsc":"^2.2.0","typescript":"^5.8.0","@types/node":"^22.0.0","@cloudflare/workers-types":"^4.20251216.0"},"peerDependencies":{"vue":"^3.4.0 || ^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/eldrin-app-vue_0.0.2_1767427302767_0.18327698537963544","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@eldrin-project/eldrin-app-vue","version":"0.0.3","description":"Vue adapter for Eldrin apps providing single-spa lifecycle and database composables","publishConfig":{"access":"public"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"vue-tsc --noEmit","lint":"eslint src"},"keywords":["eldrin","vue","single-spa","cloudflare","d1"],"author":{"name":"Eldrin Team"},"license":"MIT","peerDependencies":{"vue":"^3.4.0 || ^3.5.0"},"dependencies":{"@eldrin-project/eldrin-app-core":"^0.0.5","single-spa-vue":"^3.0.0"},"devDependencies":{"@cloudflare/workers-types":"^4.20251216.0","@types/node":"^22.0.0","tsup":"^8.0.0","typescript":"^5.8.0","vue":"^3.5.0","vue-tsc":"^2.2.0"},"engines":{"node":">=18.0.0"},"_id":"@eldrin-project/eldrin-app-vue@0.0.3","gitHead":"556121093caa159bcb7dacdc68ca4abda4eb9b54","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-i6wAIHNzL2MU4TnBmxAdqwOQG1/0HqttRvds/N1SbOX1XFbjbsyzvHUglCjdyytd+j12r3slCXt0aQnERIHmQA==","shasum":"d64f7c3770590eee9c9883d01c860647d6ef137f","tarball":"https://registry.npmjs.org/@eldrin-project/eldrin-app-vue/-/eldrin-app-vue-0.0.3.tgz","fileCount":8,"unpackedSize":52609,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBsYI4xjFYfZ4kilrvqrNVBXOYkaKfia4hqWasfZ6lebAiEA00SQaYE6VHVxSfKGVT0f5ucvFr248AmAqOGicdQpsGE="}]},"_npmUser":{"name":"tiborkiray","email":"tibor.kiray@gmail.com"},"directories":{},"maintainers":[{"name":"tiborkiray","email":"tibor.kiray@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/eldrin-app-vue_0.0.3_1767429110938_0.8625195223393629"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-02T01:39:49.544Z","modified":"2026-01-03T08:31:51.277Z","0.0.1":"2026-01-02T01:39:49.780Z","0.0.2":"2026-01-03T08:01:42.893Z","0.0.3":"2026-01-03T08:31:51.078Z"},"author":{"name":"Eldrin Team"},"license":"MIT","keywords":["eldrin","vue","single-spa","cloudflare","d1"],"description":"Vue adapter for Eldrin apps providing single-spa lifecycle and database composables","maintainers":[{"name":"tiborkiray","email":"tibor.kiray@gmail.com"}],"readme":"# @eldrin-project/eldrin-app-vue\n\nVue adapter for building Eldrin marketplace apps with single-spa micro-frontend architecture and Cloudflare D1 database support.\n\n## Overview\n\nThis package is the **Vue adapter layer** in the Eldrin ecosystem:\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                     Your Vue App                            │\n├─────────────────────────────────────────────────────────────┤\n│              @eldrin-project/eldrin-app-vue                 │\n│  • single-spa lifecycle management                          │\n│  • Vue composables for database access                      │\n│  • Shell communication (auth, user context)                 │\n├─────────────────────────────────────────────────────────────┤\n│              @eldrin-project/eldrin-app-core                │\n│  • Database migrations with checksum verification           │\n│  • Auth utilities (JWT, permissions)                        │\n│  • Event communication                                      │\n├─────────────────────────────────────────────────────────────┤\n│                    Eldrin Shell                             │\n│  • Micro-frontend orchestration                             │\n│  • User authentication                                      │\n│  • D1 database provisioning                                 │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Installation\n\n```bash\nnpm install @eldrin-project/eldrin-app-vue\n```\n\n**Peer dependencies:**\n- `vue` ^3.4.0 || ^3.5.0\n\n## Quick Start\n\n### 1. Set up single-spa entry point (`eldrin-my-app.ts`)\n\n```ts\nimport { createApp } from '@eldrin-project/eldrin-app-vue';\nimport App from './App.vue';\nimport migrations from './migrations';\n\nexport const { bootstrap, mount, unmount } = createApp({\n  name: 'my-vue-app',\n  root: App,\n  migrations,\n  onMigrationsComplete: (result) => {\n    console.log(`Executed ${result.executed} migrations`);\n  },\n  configureApp: (app) => {\n    // Optional: Add plugins, global components, etc.\n    // app.use(router);\n    // app.use(pinia);\n  },\n});\n```\n\n### 2. Use composables in components\n\n```vue\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport {\n  useDatabase,\n  useAuthHeaders,\n  useEldrinGlobal,\n  useMigrationsComplete,\n} from '@eldrin-project/eldrin-app-vue';\n\nconst db = useDatabase();\nconst authHeaders = useAuthHeaders();\nconst eldrin = useEldrinGlobal();\nconst migrationsComplete = useMigrationsComplete();\n\nconst items = ref([]);\n\nonMounted(async () => {\n  if (!migrationsComplete) {\n    console.log('Waiting for migrations...');\n    return;\n  }\n\n  // Option 1: Direct D1 query\n  if (db) {\n    const result = await db.prepare('SELECT * FROM items').all();\n    items.value = result.results;\n  }\n\n  // Option 2: API call with auth\n  const response = await fetch('/api/items', {\n    headers: authHeaders,\n  });\n  items.value = await response.json();\n});\n</script>\n\n<template>\n  <div>\n    <p>Welcome, {{ eldrin?.user?.name }}</p>\n    <ul>\n      <li v-for=\"item in items\" :key=\"item.id\">{{ item.name }}</li>\n    </ul>\n  </div>\n</template>\n```\n\n## API Reference\n\n### Lifecycle Functions\n\n#### `createApp(options: CreateAppOptions): AppLifecycle`\n\nCreates a single-spa compatible Vue app with Eldrin integration.\n\n```ts\ninterface CreateAppOptions {\n  name: string;                                      // App name (for logging)\n  root: Component;                                   // Root Vue component\n  migrations?: MigrationFile[];                      // SQL migrations to run\n  onMigrationsComplete?: (result: MigrationResult) => void;\n  onMigrationError?: (error: Error) => void;\n  configureApp?: (app: App) => void;                 // Vue app configuration\n}\n```\n\n#### `combineLifecycles(eldrinLifecycle, vueLifecycle): AppLifecycle`\n\nCombines Eldrin lifecycle with another single-spa lifecycle. Useful for advanced scenarios where you need more control.\n\n```ts\nimport { createApp, combineLifecycles } from '@eldrin-project/eldrin-app-vue';\nimport singleSpaVue from 'single-spa-vue';\n\nconst eldrinLifecycle = createApp({ name: 'my-app', root: App, migrations });\nconst customLifecycle = singleSpaVue({ /* custom config */ });\n\nexport const { bootstrap, mount, unmount } = combineLifecycles(\n  eldrinLifecycle,\n  customLifecycle\n);\n```\n\n### Composables\n\n| Composable | Return Type | Description |\n|------------|-------------|-------------|\n| `useDatabase()` | `D1Database \\| null` | Access the D1 database instance |\n| `useDatabaseContext()` | `DatabaseContext` | Full context with migration status |\n| `useMigrationsComplete()` | `boolean` | Check if migrations completed |\n| `useEldrinGlobal()` | `EldrinGlobal \\| null` | Access shell context (auth, user) |\n| `useAuthHeaders()` | `Record<string, string>` | Get authentication headers for API calls |\n\n### Helper Functions\n\n#### `getEldrinGlobal(): EldrinGlobal | null`\n\nNon-reactive helper for accessing shell context outside Vue components.\n\n```ts\nimport { getEldrinGlobal } from '@eldrin-project/eldrin-app-vue';\n\nconst eldrin = getEldrinGlobal();\nconst headers = eldrin?.getAuthHeaders?.() ?? {};\n```\n\n### Injection Keys\n\n#### `DatabaseContextKey`\n\nVue injection key for database context. Used internally by composables.\n\n```ts\nimport { inject } from 'vue';\nimport { DatabaseContextKey } from '@eldrin-project/eldrin-app-vue';\n\nconst context = inject(DatabaseContextKey);\n```\n\n### Types\n\n```ts\n// Global context exposed by the Eldrin shell\ninterface EldrinGlobal {\n  getAuthHeaders?: () => Record<string, string>;\n  user?: {\n    id: string;\n    email: string;\n    name?: string;\n  };\n}\n\n// Database context with migration status\ninterface DatabaseContext {\n  db: D1Database | null;\n  migrationsComplete: boolean;\n  migrationResult: MigrationResult | null;\n}\n\n// Single-spa lifecycle props\ninterface LifecycleProps {\n  name: string;\n  singleSpa: unknown;\n  mountParcel: unknown;\n  db?: D1Database;\n  manifest?: { baseUrl?: string; [key: string]: unknown };\n}\n```\n\n## Migration System\n\nMigrations run automatically during the single-spa bootstrap phase, before your Vue app mounts.\n\n```ts\n// migrations.ts (auto-generated by Vite plugin)\nimport type { MigrationFile } from '@eldrin-project/eldrin-app-core';\n\nconst migrations: MigrationFile[] = [\n  {\n    name: '20240101120000-create-items.sql',\n    content: 'CREATE TABLE IF NOT EXISTS items (id TEXT PRIMARY KEY, name TEXT);',\n  },\n];\n\nexport default migrations;\n```\n\nMigrations are tracked in `_eldrin_migrations` table with SHA-256 checksums.\n\n## Shell Integration\n\nThe Eldrin shell provides:\n\n- **Authentication**: Access via `useAuthHeaders()` or `window.__ELDRIN__.getAuthHeaders()`\n- **User context**: Current user via `useEldrinGlobal()?.user`\n- **Database**: D1 instance passed through single-spa props\n\n## App Configuration\n\nUse `configureApp` to add Vue plugins:\n\n```ts\nimport { createPinia } from 'pinia';\nimport { createRouter } from 'vue-router';\n\nexport const { bootstrap, mount, unmount } = createApp({\n  name: 'my-vue-app',\n  root: App,\n  configureApp: (app) => {\n    app.use(createPinia());\n    app.use(createRouter({ /* ... */ }));\n  },\n});\n```\n\n## Related Packages\n\n- [`@eldrin-project/eldrin-app-core`](https://www.npmjs.com/package/@eldrin-project/eldrin-app-core) - Core library\n- [`@eldrin-project/eldrin-app-angular`](https://www.npmjs.com/package/@eldrin-project/eldrin-app-angular) - Angular adapter\n- [`@eldrin-project/eldrin-app-react`](https://www.npmjs.com/package/@eldrin-project/eldrin-app-react) - React adapter\n- [`@eldrin-project/eldrin-app-svelte`](https://www.npmjs.com/package/@eldrin-project/eldrin-app-svelte) - Svelte adapter\n- [`create-eldrin-project`](https://www.npmjs.com/package/create-eldrin-project) - Project scaffolding CLI\n\n## License\n\nMIT\n","readmeFilename":"README.md"}