vuejs:vue3

Installation

meteor add vuejs:vue3

Basic usage

Start a subscription (with static parameters):

1import { subscribe } from 'meteor/vuejs:vue3'
2
3export default {
4  setup () {
5    const { ready, stop } = subscribe('links.all' /*, 'some', 'params', 'here' */)
6
7    watch(ready, value => {
8      console.log('loading:', !value)
9    })
10  }
11}

Star a subscription (with reactive parameters):

1import { ref } from 'vue'
2import { autoSubscribe } from 'meteor/vuejs:vue3'
3
4export default {
5  setup () {
6    const filter = ref('meow')
7
8    autoSubscribe(() => ['links.some', filter.value])
9  }
10}

Use Tracker:

1import { autorun } from 'meteor/vuejs:vue3'
2// Import some collection
3import { Links } from '/imports/api/links/links.js'
4
5export default {
6  setup () {
7    const { result: links, stop } = autorun(() => Links.find({}))
8
9    return {
10      links,
11    }
12  }
13}

If you don't plan on manually controlling the autorun, you can use autoResult instead which only returns the result:

1import { autoResult } from 'meteor/vuejs:vue3'
2// Import some collection
3import { Links } from '/imports/api/links/links.js'
4
5export default {
6  setup () {
7    const links = autoResult(() => Links.find({}))
8
9    return {
10      links,
11    }
12  }
13}

Full example:

<script setup>
import { Links } from '/imports/api/links/links.js'
import { subscribe, autoSubscribe, autoResult } from 'meteor/vuejs:vue3'

const { ready } = subscribe('links.all')
// const { ready } = autoSubscribe(() => ['links.all'])

const links = autoResult(() => Links.find({}))

function submit (form) {
  const title = form.title
  const url = form.url

  Meteor.call('links.insert', title.value, url.value, (error) => {
    if (error) {
      alert(error.error)
    } else {
      title.value = ''
      url.value = ''
    }
  })
}
</script>

<template>
  <h2>Learn Meteor!</h2>
  <ul>
    <li>
      <form @submit.prevent="submit($event.target)">
        <input type="text" name="title" placeholder="Title" required>
        <input type="url" name="url" placeholder="Url" required>
        <input type="submit" name="submit" value="Add new link">
      </form>
    </li>

    <div v-if="!ready">Loading...</div>

    <li v-for="link of links" :key="link._id">
      <a :href="link.url" target="_blank">{{ link.title }}</a>
    </li>
  </ul>
</template>