{"_id":"@akson/vue-meteor-tracker","_rev":"5-0e83828756f8d0b697fa7676add8d5f1","name":"@akson/vue-meteor-tracker","dist-tags":{"latest":"3.0.0-beta.7"},"versions":{"3.0.0-beta.7":{"name":"@akson/vue-meteor-tracker","version":"3.0.0-beta.7","keywords":["vue","meteor","integration","tracker","reactivity"],"author":{"name":"Guillaume CHAU"},"license":"MIT","_id":"@akson/vue-meteor-tracker@3.0.0-beta.7","maintainers":[{"name":"akson","email":"contact@akson.ch"}],"homepage":"https://github.com/meteor-vue/vue-meteor-tracker#readme","bugs":{"url":"https://github.com/meteor-vue/vue-meteor-tracker/issues"},"dist":{"shasum":"82612e4d7e6acf457140e06e11875c56db1c7cae","tarball":"https://registry.npmjs.org/@akson/vue-meteor-tracker/-/vue-meteor-tracker-3.0.0-beta.7.tgz","fileCount":7,"integrity":"sha512-6TVwGUGjld4KmeSDNglEsAP9ijbXiSAHVM7IprEGnCyXI35ZuGKof0CW4zu5J2zvZeRhCeG3H7Hti1I6qH3zhg==","signatures":[{"sig":"MEQCICWpN8CN+cz1QK5Qvi4xWPGkXfF9b5BaiKGi554gPTYkAiBdD+9lV4VpKYBFB+GajBxHMB1cOxCq+NXNnqeAy5H9cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19066},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">14.5.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./*":"./*"},"gitHead":"441a6ad2b125862a804e1a7b394a521749a14990","scripts":{"test":"pnpm run test:eslint","build":"rimraf dist && tsc -d","watch":"tsc -d -w --sourceMap","test:eslint":"eslint --ext .js,.ts src","prepublishOnly":"pnpm run test && pnpm run build"},"_npmUser":{"name":"akson","email":"contact@akson.ch"},"repository":{"url":"git+https://github.com/meteor-vue/vue-meteor-tracker.git","type":"git"},"_npmVersion":"10.2.3","description":"Use Meteor Tracker reactivity inside Vue components","directories":{},"_nodeVersion":"18.19.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.38","eslint":"^8.13.0","rimraf":"^3.0.2","typescript":"^4.8.2","@types/node":"^18.7.14","@types/meteor":"^1.4.87","eslint-plugin-n":"^15.2.5","eslint-plugin-node":"^11.1.0","eslint-plugin-import":"^2.26.0","eslint-plugin-promise":"^6.0.0","eslint-config-standard":"^17.0.0","@typescript-eslint/parser":"^5.18.0","@typescript-eslint/eslint-plugin":"^5.18.0"},"peerDependencies":{"vue":"^2.7.0 || ^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-meteor-tracker_3.0.0-beta.7_1720440857188_0.09255299906450376","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no consumers. No longer maintained."}},"time":{"created":"2024-07-08T12:14:17.109Z","modified":"2026-03-19T13:02:51.819Z","3.0.0-beta.7":"2024-07-08T12:14:17.324Z"},"bugs":{"url":"https://github.com/meteor-vue/vue-meteor-tracker/issues"},"author":{"name":"Guillaume CHAU"},"license":"MIT","homepage":"https://github.com/meteor-vue/vue-meteor-tracker#readme","keywords":["vue","meteor","integration","tracker","reactivity"],"repository":{"url":"git+https://github.com/meteor-vue/vue-meteor-tracker.git","type":"git"},"description":"Use Meteor Tracker reactivity inside Vue components","maintainers":[{"name":"antoineschaller","email":"antoine.schaller@akson.ch"}],"readme":"# Vue integration for Meteor\n\n[![npm](https://img.shields.io/npm/v/vue-meteor-tracker.svg) ![npm](https://img.shields.io/npm/dm/vue-meteor-tracker.svg)](https://www.npmjs.com/package/vue-meteor-tracker)\n[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg) ![vue2.7](https://img.shields.io/badge/vue-2.7-brightgreen.svg)](https://vuejs.org/)\n\nReactive subscriptions and data from Meteor for Vue components.\n\n## Sponsors\n\n[Become a sponsor!](https://github.com/sponsors/Akryum)\n\nWe are very grateful to all our sponsors for their support:\n\n<p align=\"center\">\n  <a href=\"https://guillaume-chau.info/sponsors/\" target=\"_blank\">\n    <img src='https://akryum.netlify.app/sponsors.svg'/>\n  </a>\n</p>\n\n<br>\n\n## Installation\n\n```sh\nmeteor npm install --save vue-meteor-tracker@next\n```\n\nInstall `vite:bundler` too:\n\n```sh\nmeteor add vite:bundler\n```\n\n[Learn more](https://packosphere.com/vite/bundler)\n\nExample Vite config:\n\n```js\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n  ],\n\n  optimizeDeps: {\n    exclude: [\n      'vue-meteor-tracker',\n    ],\n  },\n\n  meteor: {\n    clientEntry: 'imports/ui/main.ts',\n  },\n})\n```\n\n## Options API\n\nInstall the plugin into Vue:\n\n```js\nimport { VueMeteor } from 'vue-meteor-tracker'\napp.use(VueMeteor)\n```\n\nIn your Vue component, add a `meteor` object :\n\n\n```js\nexport default {\n  meteor: {\n    // Meteor specific options\n  }\n}\n```\n\n### Subscriptions\n\nAdd an object for each subscription in a `$subscribe` object. The object key is the name of the publication and the value is either an array of parameters or a function returning an array of parameters. These subscription will be stopped when the component is destroyed.\n\n```js\nexport default {\n  meteor: {\n    // Subscriptions\n    $subscribe: {\n      // Subscribes to the 'threads' publication with no parameters\n      'threads': [],\n      // Subscribes to the 'threads' publication with static parameters\n      'threads': ['new', 10], // The 10 newest threads\n      // Subscribes to the 'posts' publication with dynamic parameters\n      // The subscription will be re-called when a vue reactive property changes\n      'posts': function() {\n        // Here you can use Vue reactive properties\n        return [this.selectedThreadId] // Subscription params\n      }\n    }\n  }\n}\n```\n\n\nYou can also use the `$subscribe(name, params)` method in you component code:\n\n\n```js\nmounted () {\n  // Subscribes to the 'threads' publication with two parameters\n  this.$subscribe('thread', ['new', 10])\n}\n```\n\nThe `$subReady` object on your component contains the state of your subscriptions. For example, to know if the 'thread' subscription is ready, use this *reactive* expression:\n\n```js\nconsole.log(this.$subReady.thread)\n```\n\nOr in your template:\n\n```html\n<div v-if=\"!$subReady.thread\">Loading...</div>\n```\n\nYou can also change the default subscription method by defining the `Vue.config.meteor.subscribe` function:\n\n\n```js\nimport { config } from 'vue-meteor-tracker'\n\n// You can replace the default subcription function with your own\n// Here we replace the native subscribe() with a cached one\n// with the ccorcos:subs-cache package\nconst subsCache = new SubsCache({\n  expireAfter: 15,\n  cacheLimit: -1\n})\n\nconfig.subscribe = function(...args) {\n  return subsCache.subscribe(...args)\n}\n```\n\n### Reactive data\n\nYou can add reactive properties that update from any Meteor reactive sources (like collections or session) by putting an object for each property in the `meteor` object. The object key is the name of the property (it shouldn't start with `$`), and the value is a function that returns the result.\n\nHere is an example:\n\n```js\nexport default {\n  data() {\n    return {\n      selectedThreadId: null\n    }\n  },\n  meteor: {\n    // Subscriptions\n    $subscribe: {\n      // We subscribe to the 'threads' publication\n      'threads': []\n    },\n    // Threads list\n    // You can access tthe result with the 'threads' property on the Vue instance\n    threads () {\n      // Here you can use Meteor reactive sources\n      // like cursors or reactive vars\n      // as you would in a Blaze template helper\n      return Threads.find({}, {\n        sort: {date: -1}\n      })\n    },\n    // Selected thread\n    selectedThread () {\n      // You can also use Vue reactive data inside\n      return Threads.findOne(this.selectedThreadId)\n    }\n  }\n})\n```\n\nUse the reactive data in the template:\n\n\n```html\n<!-- Thread list -->\n<ThradItem\n  v-for=\"thread in threads\"\n  :data=\"thread\"\n  :selected=\"thread._id === selectedThreadId\"\n  @select=\"selectThread(thread._id)\"\n/>\n\n<!-- Selected thread -->\n<Thread v-if=\"selectedThread\" :id=\"selectedThreadId\"/>\n```\n\n\nOr anywhere else in you Vue component:\n\n```js\ncomputed: {\n  count () {\n    return this.threads.length\n  }\n}\n```\n\n### Meteor Methods\n\nYou can call a Meteor method with a promise using `callMethod`:\n\n```js\nimport { callMethod } from 'vue-meteor-tracker'\n\nexport default {\n  methods: {\n    async insertLink () {\n      try {\n        await callMethod('links.insert', 'title', 'url')\n        console.log('done')\n      } catch (e) {\n        console.error(e)\n      }\n    },\n  },\n}\n```\n\n---\n\n## Composition API\n\n### Subscriptions\n\nInside the component `setup`, you can use the `subscribe` function:\n\n```js\nimport { subscribe } from 'vue-meteor-tracker'\n\n// Simple sub\n\nsubscribe('links')\n// With params\nsubscribe('linksByPageAndLimit', 1, 10)\n\n// Reactive sub\n\nconst page = ref(1)\nsubscribe(() => ['linksByPageAndLimit', page.value, 10])\n```\n\nIf you need to subscribe later (outside of the `setup` context), call `useSubscribe` instead:\n\n```js\nimport { useSubscribe } from 'vue-meteor-tracker'\n\nconst { subscribe } = useSubscribe()\n\nsetTimeout(() => {\n  subscribe('linksByPage', 2)\n}, 1000)\n```\n\n\n### Reactive Data\n\nIn the component `setup` context, you can use the `autorun` function:\n\n```js\nimport { autorun } from 'vue-meteor-tracker'\nimport { LinksCollection } from '/imports/api/links'\n\nconst links = autorun(() => LinksCollection.find({}).fetch()).result\n// const { result, stop } = autorun(() => LinksCollection.find({}).fetch())\n```\n\nIf you need to start an autorun later (outside of the `setup` context), call `useAutorun` instead:\n\n```js\nimport { useAutorun } from 'vue-meteor-tracker'\nimport { LinksCollection } from '/imports/api/links'\n\nconst { autorun } = useAutorun()\n\n// Later...\nconst links = autorun(() => LinksCollection.find({}).fetch()).result\n```\n\n### Meteor Methods\n\nYou can call a Meteor method with a promise using `callMethod`:\n\n```js\nimport { callMethod } from 'vue-meteor-tracker'\n\nasync function insertLink () {\n  try {\n    await callMethod('links.insert', 'title', 'url')\n    console.log('done')\n  } catch (e) {\n    console.error(e)\n  }\n}\n```\n\nTo keep track of pending, error and result state with reactive variables, you can use `useMethod`:\n\n```ts\nimport { useMethod } from 'vue-meteor-tracker'\nimport { LinksCollection } from '/imports/api/links'\n\nconst insertLinkMethod = useMethod<[url: string, link: string]>('links.insert')\ninsertLinkMethod.onResult((err) => {\n  if (!err) {\n    // Reset form\n    insertLinkForm.title = ''\n    insertLinkForm.url = ''\n  }\n})\n\n// Reactive state\nwatch(insertLinkMethod.pending, () => { /* ... */ })\nwatch(insertLinkMethod.error, () => { /* ... */ })\nwatch(insertLinkMethod.result, () => { /* ... */ })\n\nconst insertLinkForm = reactive({\n  title: '',\n  url: '',\n})\n\nasync function insertLink () {\n  await insertLinkMethod.call(insertLinkForm.title, insertLinkForm.url)\n  console.log('done')\n}\n```\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}