title: How to declare javascript class instance in vue?
body: <p>I need to get access to the data stored in canvas.js in my vue.js. For this I have to create the instance of canvas in my vue. But I have some issues with this.</p>
  
  <p>I found the <a href="https://stackoverflow.com/questions/50215005/import-javascript-class-in-vuejs">similar problem</a> as mine but the answer doesnt set up for me, I also tried require.
  I also find some <a href="https://flaviocopes.com/how-to-solve-unexpected-identifier-modules/" rel="nofollow noreferrer">solution</a> with ES6, but I dont use ES6, but I also tried it, not working.</p>
  
  <p>This what I type in Vue.js</p>
  
  <pre><code>import Canvas from './canvas.js';
  </code></pre>
  
  <p>Canvas.js</p>
  
  <pre><code>export default class Canvas{
  contructor(){
      this.devices = ["5", "15"];
  }
  </code></pre>
  
  <p>I wonder why does first solution didnt help me, bcz my problem is very similar. If I comment with "//" the import in Vue.js everything working fine. Maybe there are another solution without using import, but I need to have access to the data stored in Canvas. </p>
  
  <p>P.s pls dont recommend to use components bcs im planning to store another class instance in devices of Canvas, and there would be too much of useless components(imho bcs im noob in vue)</p>
  
  <p>UPD: My issue that the code doest not compile after "import", and I have this . <a href="https://i.stack.imgur.com/x4ypM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x4ypM.png" alt="enter image description here"></a>  </p>
  
  <p>but If i put "import" to comment "//" the situation is like 
  <a href="https://i.stack.imgur.com/J608G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J608G.png" alt="enter image description here"></a></p>
  
  <p>UPD2: The full Vue.js file</p>
  
  <pre><code>//import Canvas from './canvas.js';
    var app1 = new Vue({
       el: '#vue1',
       data: {
          arr2: [8, 7, 6, 5]
       },
       methods: {
          addArr1: function(num){
          this.arr2.push(num)
       }
     }
   });
  </code></pre>
  
  <p>canvas.js </p>
  
  <pre><code>export default class Canvas{
  contructor(){
      this.devices = ["5", "15"];
  }
  </code></pre>
  
  <p>my index.html</p>
  
  <pre><code>&lt;div id="vue1"&gt;
      &lt;ul v-for="ar in arr2"&gt;
          &lt;li&gt;{{ ar }}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button v-on:click="addArr1(15)"&gt;CLICK&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>