Uncaught TypeError: _Vue.component is not a function

Hello,

I have been trying to set up a new Meteor project with Vue as frontend framework.
I am following the docs at https://guide.meteor.com/vue.html. I’m only on “Integrating Vue With Meteor” and already struggeling. I’m on Meteor 1.8.2.

So I have followed exactly what it states there but I’m receiving the following error:
Uncaught TypeError: _Vue.component is not a function

I googled the error and searched on this forum without any luck.
I’ll drop the content of the files I have edited below, but these are exact the ones from the guide:

client/main.html

<head>
  <title>test</title>
</head>

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

client/App.vue

<template>
    <div>
        <p>This is a Vue component and below is the current date:<br />{{date}}</p>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        date: new Date(),
      };
    }
  }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>

client.main.js

import Vue from 'vue';
import App from './App.vue';
import './main.html';

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

Screenshot of the error if that would help:
https://imgur.com/9nHrnIY

Thanks in advance for any suggestions / help!

Hi,
see https://github.com/meteor-vue/vue-meteor/issues/364

Note that you can prevent this problem by disabling automatic component registration (https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component#automatic-components-registration). Move your files in an imports directory and import them manually.

A working example is available here : https://github.com/meteor-vue/vue-meteor-demo

1 Like

thank you very much ! spend my whole day to this problem and let me down. thanks your good answer . the problem is resolved. when i put my App.vue in the imports foldder.