CODEWITHSUNDEEP
vue.jsvuejs2
Mafys Grif
Mafys Grif

Reputation: 577

Vue is not defined in components

I have file: components.js:

import Vue from 'vue'

import SelectCategory from './components/SelectCategoryComponent'
import CommentsManager from './components/CommentsManagerComponent'

Vue.component('select-category', SelectCategory);
Vue.component('comments-manager', CommentsManager);

In app.js I imported this file:

window.Vue = require('vue');

import './components'

But when page is loading I get error: Vue is not defined. When I add import Vue from 'vue' in every component then all working good. But how I can add Vue globally, without add import Vue from 'vue' in every component?

Upvotes: 3

Views: 8508

Answers (2)

Steven Spungin
Steven Spungin

Reputation: 29169

But how I can add Vue globally, without add import Vue from 'vue' in every component

You should not use global variables. Put import Vue from 'vue' in every file.

Now, if you still want to, use global instead of window. And make sure that file is loaded first. Or, you might want to set window= in your html file, and leave it out of every file.

Upvotes: 3

Thamer
Thamer

Reputation: 1954

As I can see within your components.js you have imported Vue and you have imported another Vue and you have put it to window object. so you have imported 2 different Vue within your application, as well there is no need to use components.js and app.js that can be confused later. so I suggest you put all your requirement within app.js file. so app.js file will be like this :

    import Vue from 'vue'; // es6 syntax
    window.Vue = Vue;

    import SelectCategory from './components/SelectCategoryComponent'
    import CommentsManager from './components/CommentsManagerComponent'

    Vue.component('select-category', SelectCategory);
    Vue.component('comments-manager', CommentsManager);

Upvotes: 2

Related Questions