Solved: Problem with Vue Todos tutorial and mongodb

I am following the ToDos tutorial and I am stuck on inserting data into mongo as described on this page https://www.meteor.com/tutorials/vue/collections

I am having a problem putting tasks into mongo. You will see below I am gold a task has been added, but the task is not there when I search for it and it nothing displays in the app.

❯ meteor mongo
MongoDB shell version v4.2.5
connecting to: mongodb://127.0.0.1:3001/meteor?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session { "id" : UUID("0fa1120a-0c1e-44d7-a3dc-20b239d6e127") }
MongoDB server version: 4.2.5
meteor:PRIMARY> db.taks.find()
meteor:PRIMARY> db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
WriteResult({ "nInserted" : 1 })
meteor:PRIMARY> db.taks.find()
meteor:PRIMARY> 

You spelled the collection name wrong on the find:

db.tasks.find()

Thank you. I now get results in the terminal, but still not in the app. I will check my code again.

I still have a problem with tasks not being displayed on the web page.

here are my files.

main.js

import { Meteor } from 'meteor/meteor';
import Vue from 'vue';
import VueMeteorTracker from 'vue-meteor-tracker';
Vue.use(VueMeteorTracker)
import '../imports/api/tasks.js'

import App from '../imports/ui/App.vue';

Meteor.startup(() => {
  new Vue({
    el: '#app',
    ...App,
  })
})

tasks.js

import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

App.vue

if I return a hard coded array of tasks instead of return Tasks.find({}).fetch(); , they are displayed correctly.

<template>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>
    <ul>
      <Task v-for="task in tasks" v-bind:key="task._id" v-bind:task="task" />
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import Task from "./Task.vue";
import { Tasks } from "../api/tasks.js";

export default {
  
  components: {
    Task
  },
  data() {
    return {};
  },
  methods: {},
  meteor: {
    tasks() {
      return Tasks.find({}).fetch();  
    }
  },
}
</script>

Task.vue

<template>
  <li>{{ this.task.text }}</li>
</template>

<script>
export default {
  props: [ "task" ],
  data() {
    return {};
  }
}
</script>

This is the command I am using in the mongodb console to insert records

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

and the tasks are there

meteor:PRIMARY> db.tasks.find()
{ "_id" : ObjectId("5f23f683d9fd998fed62a961"), "text" : "Hello world!", "createdAt" : ISODate("2020-07-31T10:46:27.582Z") }
{ "_id" : ObjectId("5f23f6f4d9fd998fed62a963"), "text" : "Hello world!", "createdAt" : ISODate("2020-07-31T10:48:20.163Z") }
{ "_id" : ObjectId("5f240d57aa2a23b43ffa663a"), "text" : "Hello world!", "createdAt" : ISODate("2020-07-31T12:23:51.412Z") }
{ "_id" : ObjectId("5f2414c7aa2a23b43ffa663b"), "text" : "Hello world!", "createdAt" : ISODate("2020-07-31T12:55:35.710Z") }

Problem solved. I had put

import '../imports/api/tasks.js' into client/main.js rather than server/main.js

1 Like

Let me know about your experience so far. I’m rewriting the Vue guide. :slight_smile:

There has been a bit of learning curve in first understanding the principles of Meteor and then how Vue integrates with those principles, but I think I am there now.

I have learned a lot from this guy on YouTube on Meteor/Vue Integration. https://www.youtube.com/channel/UCsvIYWa4X0_DyszTP5nWSyw It would be great if he could agree to work with on a series that went with the new guide. He is very good at explaining/breaking up the videos into logical sections, most videos are under 5 minutes and he makes sure to include good development practices as he goes along.

I am definitely going to be working a lot with this combination of Meteor and Vue in the future. Can’t wait to see the new guide when it’s ready.

If possible could you go beyond the basic integration a single Vue App and include

Vue Router with pages
where is the best place to put the components & pages folder
Vuex

It would also be nice to understand how to integrate a third-party package such as tailwind into a Vue installation that is integrated into Meteor, where webpack is required.

Many thanks for your time on this project.

Simon

1 Like

Very nice feedback. There are some attempts atm to create such a series. Will keep you posted on that!

Btw here is my example repository that illustrate some good practices for building a scalable admin dashboard. Its partially inspired by how nuxt handles file structures on the background