Issues getting VueJS to work?

VueJS
1

Hi all,

I feel like giving VueJS a go, but can’t for the life of me get it to work…

I’ve installed:

akryum:vue-component@0.8.1

and these npm packages:

"dependencies": {
    "babel-runtime": "^6.18.0",
    "meteor-node-stubs": "~0.2.0",
    "vue": "^2.1.10",
    "vue-meteor-tracker": "^1.0.4",
    "vue-router": "^2.2.0"
}

Here is my main.js file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '/imports/App.vue'

Vue.use( VueRouter );

// Create the router
const router = new VueRouter({
    mode: 'history'
});

Meteor.startup(() => {
    new Vue({
        router,
        el: '#app',
        template: '<App/>',
        components: { App }
    });
});

And the App component:

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

The error I get is:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in root instance)

But if I try with the akryum packages for vue and vue-router, I get a ‘sort is not defined’ error. So basically, none of the current Meteor methods appear to be working for me…

Any help would be appreciated! Especially from @akryum if you’re about :slight_smile:

Cheers!

2

Hmm…

I have it working now, I changed the meteor.startup function to:

new Vue({
        router: router,
        render: h => h( App ),
}).$mount( '#app' );

However, I did this earlier and it wouldn’t work! Now it does though, so I’m happy :slight_smile:

Cheers.

1 Like
3

You install vue-meteor-tracker from npm, but you never use it in your code. Add:

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

Also, in your App component, you don’t need the id="app" part. You can also ommit the name="app" part in your Meteor projects as long as you want the name of the component to be adequate to the name of the file.

5 Likes
4

Is that Akryum package, where is it?

5
6

Oh lol, it’s the same vue-components I suppose. The vue components package doesn’t show how to use tracker.

7

Meteor-vue-components package doesn’t take care of Tracker at all, its responsibility are .vue files.

Vue-meteor-tracker package is the one responsible for Tracker, so all the Meteor Tracker usage in Vue documentation is kept in Vue-meteor-tracker readme.

1 Like