CODEWITHSUNDEEP
vue.js
JacobVin
JacobVin

Reputation: 37

Vue Component. Require is not defined

Using Vue.js I have this in my /Component/App.vue

 import Vue from 'vue';
 import VueFusionCharts from 'vue-fusioncharts';
 import FusionCharts from 'fusioncharts';
 import Column2D from 'fusioncharts/fusioncharts.charts';
 import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; 
 Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
 export default {
 name: 'app',
  data () {
    return {

     }
     }
 <template>
   <div id="appp">
    <div id="chart-container">
    </div>
   </div>
 </template>

In my js/examplevue.js Script I have 

Vue.component('Chart', require('./components/App.vue'));
var app = new Vue({
el: '#app',
});

Then in my balde i have :

<div class=" " id="app">
  <Chart>.</Chart>
</div>
<script src="{{ asset('js/examplevue.js') }}"></script>

I catch the error : Require is not defined. in Exemple.js Usually, my vuejs code is working until i try to integer a component.

Upvotes: 0

Views: 2186

Answers (1)

slowFooMovement
slowFooMovement

Reputation: 568

It looks like your App.vue file is malformed and there are two other errors:

  1. in your template, the div id is mispelled as "appp" instead of "app" as defined in your examplevue.js file
  2. I also noticed you were missing a closing } on your export default statement

If you want to use a <template> tag section you must also enclose all of your Javascript in <script> tags (see code below). :

/Component/App.vue

<template>
  <div id="app">
    <div id="chart-container">
    </div>
  </div>
</template>

<script>
 import Vue from 'vue';
 import VueFusionCharts from 'vue-fusioncharts';
 import FusionCharts from 'fusioncharts';
 import Column2D from 'fusioncharts/fusioncharts.charts';
 import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; 
 Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
 export default {
   name: 'app',
   data () {
     return {}
   }
 }
</script>

you may also have to put the following code in your examplevue.js file

import Vue from 'vue';

in order to create a new Vue instance.

Hope that helps!

Upvotes: 1

Related Questions