Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueMeteor
✓ import { VueMeteor } from 'vue-meteor-tracker'
✗ const VueMeteor = require('vue-meteor-tracker')
This is the main plugin to install with `app.use(VueMeteor)`.
config
✓ import { config } from 'vue-meteor-tracker'
✗ import config from 'vue-meteor-tracker'
Used to customize global Vue Meteor Tracker options, such as the default subscription function.
Component Options API
✓ export default {
meteor: {
$subscribe: { /* ... */ },
myReactiveData() { /* ... */ }
}
}
✗ this.$meteor = { /* ... */ }
Reactivity is primarily managed via the `meteor` option in Vue components, not by directly assigning to `this.$meteor`.
This quickstart demonstrates how to install `vue-meteor-tracker`, integrate it into a Vue application using `app.use(VueMeteor)`, and define reactive Meteor subscriptions and data queries within a Vue component's `meteor` option, automatically reacting to changes.
import { createApp } from 'vue';
import App from './App.vue';
import { VueMeteor } from 'vue-meteor-tracker';
// Mock Meteor for standalone demonstration if not in a Meteor environment.
// In a real Meteor app, `Meteor` and `Mongo.Collection` are globally available.
declare global {
namespace Meteor {
const subscribe: (name: string, ...args: any[]) => { ready: () => boolean };
const Collection: new (name: string) => { find: (query?: any) => { fetch: () => any[] }, findOne: (query?: any) => any };
}
}
if (typeof (globalThis as any).Meteor === 'undefined') {
(globalThis as any).Meteor = {
subscribe: (name: string, ...args: any[]) => {
console.log(`Mock Meteor: Subscribing to ${name} with params: ${JSON.stringify(args)}`);
return { ready: () => true }; // Always ready for mock
},
Collection: function(name: string) {
console.log(`Mock Meteor: Creating Collection ${name}`);
const data: any[] = [];
if (name === 'Notes') {
data.push({ _id: 'note1', text: 'First Note' });
data.push({ _id: 'note2', text: 'Second Note' });
}
if (name === 'Threads') {
data.push({ _id: 'thread1', title: 'Main Thread' });
}
return {
find: (query?: any) => ({ fetch: () => data }),
findOne: (query?: any) => data.find(item => Object.keys(query).every(key => item[key] === query[key])) || null
};
} as any
};
}
// Example Vue component (App.vue)
import { defineComponent, ref } from 'vue';
const Notes = (globalThis as any).Meteor.Collection('Notes');
const Threads = (globalThis as any).Meteor.Collection('Threads');
const AppVueComponent = defineComponent({
name: 'MeteorTrackerExample',
data() {
return {
selectedThreadId: 'thread1',
myReactiveParam: 'paramValue',
};
},
meteor: {
$subscribe: {
'notesSubscription': () => [],
'threadsSubscription': function() {
return [this.selectedThreadId];
},
},
notes: function() {
return Notes.find({}).fetch();
},
selectedThread: function() {
return Threads.findOne({ _id: this.selectedThreadId });
},
},
mounted() {
console.log('Component mounted. Initial notes:', this.notes);
this.$subscribe('anotherSub', ['arg1', this.myReactiveParam]);
},
template: `
<div>
<h1>Vue Meteor Tracker Example</h1>
<p v-if="!$subReady.notesSubscription">Loading notes...</p>
<div v-else>
<h2>Notes:</h2>
<ul>
<li v-for="note in notes" :key="note._id">{{ note.text }}</li>
</ul>
</div>
<p v-if="!$subReady.threadsSubscription">Loading thread...</p>
<div v-else>
<h2>Selected Thread:</h2>
<p v-if="selectedThread">{{ selectedThread.title }} (ID: {{ selectedThread._id }})</p>
<p v-else>No thread selected or found.</p>
</div>
<button @click="selectedThreadId = 'newThreadId'">Change Thread ID (mock)</button>
<p>Subscription 'anotherSub' ready: {{ $subReady.anotherSub }}</p>
</div>
`,
});
const app = createApp(AppVueComponent);
app.use(VueMeteor);
app.mount('#app');
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading '$subReady')
The `VueMeteor` plugin was not properly installed (`app.use(VueMeteor)`), or an attempt to access `$subReady` occurred before the component was fully initialized.
fixEnsure `app.use(VueMeteor)` is called early in your application's bootstrap. If calling `$subscribe` or accessing `$subReady` programmatically, ensure it's within an appropriate component lifecycle hook like `mounted()`.
Error: [vue-meteor-tracker] The key 'myProp' in the meteor option is already defined in data, props, methods, etc. Please use a unique key.
A property name used within the `meteor` option (for reactive data) conflicts with an existing property in `data`, `props`, `methods`, or `computed` options (v2.0.0-beta.2 and later).
fixRename the conflicting key in either your `meteor` option or the other component options (e.g., `data`, `props`) to ensure uniqueness.
Subscription 'mySubscription' is not ready (i.e., this.$subReady.mySubscription is unexpectedly false) when using `meteor` option for subscriptions.
Incorrectly defining a subscription under the main `meteor` object instead of the `$subscribe` object, or passing `this.$subscribe` parameters as separate arguments instead of an array (v2.0.0-beta.3 and later).
fixEnsure subscriptions are defined within the `meteor: { $subscribe: { ... } }` object. When calling `this.$subscribe`, pass parameters as an array: `this.$subscribe('my-sub', [1, 2, 3])` or as a function returning an array: `this.$subscribe('my-sub', () => [this.param])`. TypeError: (0, _threads_collection.Threads.findOne) is not a function
Attempting to use the `params` and `update` object structure for `meteor` data properties, which was removed in v2.0.0-beta.1.
fixRefactor your `meteor` data property from `{ params() { ... }, update() { ... } }` to a single function that directly returns the reactive result: `myProp() { return Threads.findOne({ _id: this.selectedThreadId }); }`. Audit
Dependencies
vuerequiredCore dependency for Vue.js applications.
vite:bundlerrequiredRecommended bundler for modern Meteor projects, as per installation instructions.