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.
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