Get a list of events from mongodb with Vue

VueJS
1

Im learning Vue2

Howto get a list of for example events from a mongo collection with Vue

with blaze i do:

*.html

 {{#each allevents}}
              {{eventname}} 
{{/each}}

*.js



  'allevents': function(){

    return Events.find()
  }
2

It’s all explained here:

2 Likes
3

It would be perfect if someone could make a simple example like the Blaze example. I have still some problems to se how to do it easy like the blaze example

4
5

@thorus, I am in the same boat as you are! I have been banging my head against the wall for the past few days to my Meteor+Vue app going. However, I’ve learned a lot so far and this is my attempt to help out a fellow Vue newbie.

First part you need to make sure is that you have the right setup, i.e. Meteor and NPM packages:

A basic list of Meteor packages; .meteor/packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.2.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.3.0                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.5   # CSS minifier run for production mode
standard-minifier-js@2.2.0    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.9.0              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.0            # Server-side component of the `meteor shell` command

static-html
akryum:vue
akryum:vue-component
dynamic-import@0.2.0

A minimal list of NPM package; package.json

{
  "name": "app",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "6.23.0",
    "meteor-node-stubs": "~0.2.6",
    "vue": "2.5.2",
    "vue-meteor-tracker": "^1.0.3"
  },
  "devDependencies": {}
}

The usual meteor npm install followed by meteor run will install both group of packages.

Then in your client side application entry file, usually client/main.js or client/index.js, add the VueMeteorTracker plugin:

import Vue from 'vue';
import VueMeteorTracker from 'vue-meteor-tracker';
Vue.use(VueMeteorTracker);

In the Vue component file, e.g. Events.vue, you should have something like this:

<template>
    <ul id="events-list">
        <li v-for="event in events">
            {{ event.name }}
        </li>
    </ul>
</template>

<script>
    import {Meteor} from 'meteor/meteor';
    import Events from '/imports/api/events/events';

    export default {
        data() {
            return {
                events: []
            };
        },
        meteor: {
            $subscribe: {
                'events': []
            },
            events() {
                return events.find({}, {
                    sort: {createdAt: -1}
                });
            }
        }
    }
</script>

<style>
  div#events-list{
     list-style: none;
  }
</style>

To know exactly what each section in the <script> block, read the documentation on vue-meteor-tracker. The <template> is pretty much very standard Vue code.

Hope this helped a bit!

1 Like