Basics: Getting started w Meteor + VueJS

@skynightz93 I’m not sure if this example boilerplate for vue2 is still valid. It used to work for me some time ago, I was very happy with it, but probably because of Meteor, Vue and Akryum’s packages updates, it stopped.

Out of the box it can’t find the main component. When I update the project to recent Meteor version and fix the babel-runtime issue, it does find it, but now, the chat component can’t find the mongo collection, so the messages object shows up as undefined. It sometimes magically starts working after downgrading few packages and clearing Meteor cache randomly.

That’s why I’d rather recommend starting new project from the ground.

@emhmark7 on Github you were wondering where the MyButton component is. You can find it in client/ui folder.


As for Akryum’s stuff, in overall he made a great job with that and I love it. The only problem I have is that I failed to make it work with CoffeeScript, but in ES6 era it’s not something that would stop me from using it.

I’m also in the Vue+Meteor team. I’ll wait till Apollo provides Meteor integration that is at least half as comfortable as DDP flavoured Meteor.

1 Like

Hi, so then i will help him to create boilerplate and will give repo link when it is ready. Right now i am not able to push to repo as i’m in my office. I will update here later. Hope can help him on this one.

Fyi, i’m also not using all of the code on that repo. Im just using some part of the code as my reference.

1 Like

That would be a great thing. :slight_smile: Yeah it’s still great as a reference point, it helped me a lot.

1 Like

Hi, You can try clone my repo. It has basic code that can make it work with meteor. But i dont exactly show how to use Meteor tracker but only how to start your project

git clone git@github.com:DevsignStudio/meteor-vue-example.git
cd meteor-vue-example
meteor npm install
meteor

Or you can also clone my repo using https

git clone https://github.com/DevsignStudio/meteor-vue-example
cd meteor-vue-example
meteor npm install
meteor

Sorry, why quote me? because i am giving instruction and then code to clone? Haha sorry.:confounded:

I noticed your project does not contain the ‘node_module’ directory. But when I install from scratch with the following commands I DO get the node_modules directory. Isn’t node_modules use in pre 1.4 meteor projects?

$ meteor create fp-admin

$ cd fp-admin

$ meteor npm install

$ meteor remove blaze-html-templates

$ meteor npm install --save vue@^2.1.6

$ meteor add static-html

$ meteor add akryum:vue

$ meteor add akryum:vue-component

$ meteor add session

$ meteor add akryum:vue-router2

you need to run meteor npm install before run meteor command. node-modules directory will automatically exclude by me.

I dont exactly know that issue, maybe you dont have SSH setup in your machine? then just using https for cloning my repo. I will update my answer

You mean I need to run this:

$ mkdir fp-admin
$ cd fp-admin
$ meteor npm install

before this:

$ meteor create fp-admin

?

also, did you create the /imports dir by hand?

What you are doing as exactly right and dont change anything anymore. However, you need to change the code like my code in my repo. Or you can clone my repo.

1 Like

Got it, thanks! :slight_smile:

I’m reviewing your repo now and will try to wire things up the best I can. Also, did you create the /imports dir by hand?

1 Like

Yeah, i create imports folder. Hope it help you.

1 Like

I just wanted to share that I created a kind of a boilerplate project as well. This one uses the example Akryum created using the vue-router. I remember I needed to adjust a couple of things that weren’t working for me at that time from the original routing project and this is why I ended up creating my own. I copied the app from that repo though.

3 Likes

@skynightz93,

I noticed you’re using the following router in your package.json file:

vue-router: ^2.0.0-rc.5

but also if you do a $ meteor list it shows you’re using:

akryum:vue-router2 0.0.2

This is npm package

And here is meteor package. Thanks.

Okay. But when I do:

$ meteor add akryum:vue-router2

I do not get this vue-router: ^2.0.0-rc.5 entry in my package.json file. Do I need to do a npm install the vue-router npm as well like so?

$ meteor npm install --save vue-router

try run meteor npm install only

Sorry. It looks like you installed both. Because I removed akryum:vue-router2 and added vue-router from npm and when doing an $ meteor list, akryum:vue-router2 is no longer listed. Yet in your project it is.

@ackzell that’s a very nice work, thanks! :slight_smile: I’ve got a small best practices question.

I’ve noticed you’re injecting your AppMenu component inside of AppLayout one. That’s a perfectly valid way, but I’m wondering why did you chose this one against the alternative:

/client/main.js

import AppMenu from '/imports/ui/AppMenu.vue';
Vue.component('app-menu', AppMenu)

Did you chose your way because of some advantage of it or any kind of convention in Vuejs community? Or because of convenience and your personal preference?

1 Like

No dont remove akryum:vue-router2. Do like this

meteor add akryum:vue-router2
meteor npm install

This will automatically include npm package that require by akryum:vue-router2. akryum:vue-router2 require you to include npm package. Means that, both of this package are required in your project.