title: vue.js javascript file from static folder
body: <p>It is the first web application I am going to make, so I am totally new to Vue.js Javascript programming. I am using one of Boostrap templates called Beagle.</p>
  
  <p><a href="http://themes.getbootstrap.com/preview/?theme_id=1696&amp;show_new=" rel="nofollow noreferrer">http://themes.getbootstrap.com/preview/?theme_id=1696&amp;show_new=</a></p>
  
  <p>I have a file app-charts-morris.js which I hold in my Static folder, here is some code of this file:</p>
  
  <pre><code>var App = (function () {
  'use strict';
  
  App.chartsMorris = function( ){
  
    //Donut Chart
    function donut_chart(){
      var color1 = App.color.warning;
    var color2 = App.color.success;
    var color3 = App.color.primary;
  
    Morris.Donut({
          element: 'donut-chart',
          data: [
            {label: 'Facebook', value: 33 },
            {label: 'Google', value: 33 },
            {label: 'Twitter', value: 33}
          ],
          colors:[color1, color2, color3],
          formatter: function (y) { return y + "%" }
        });
    }
  
    donut_chart();
  
  };
  
  return App;
  })(App || {});
  </code></pre>
  
  <p>What it does is it should show me Donut chart with some javascript functions, but nothing appears here only empty space.</p>
  
  <p>Here is my Vue code:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="donut-chart" style="height: 250px;"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  data () {
    return {
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and here where I access my javascript file:</p>
  
  <pre><code> &lt;script src="/static/js/app-charts-morris.js" type="text/javascript"&gt; 
   &lt;/script&gt;
  
   &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
    //initialize the javascript
   App.init()
   App.chartsMorris()
   App.ChartJs()
   App.dashboard()
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>my main.js file</p>
  
  <pre><code>import Vue from 'vue'
  import Vuetify from 'vuetify'
  import App from './App'
  import * as firebase from 'firebase'
  import 'firebase/firestore'
  import router from './router'
  import { store } from './store'
  import {VueMasonryPlugin} from 'vue-masonry'
  import InstantSearch from 'vue-instantsearch'
  
  Vue.use(InstantSearch)
  Vue.use(Vuetify)
  Vue.use(VueMasonryPlugin)
  Vue.config.productionTip = false
  
   new Vue({
   el: '#app',
   router,
   store,
   render: h =&gt; h(App),
   created () {
    }
    })
  </code></pre>
  
  <p>What is the problem here? Why vue.js does not show my Donut chart? But it shows without any framework</p>