How to declare javascript class instance in vue?

Question

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.

I found the similar problem as mine but the answer doesnt set up for me, I also tried require. I also find some solution with ES6, but I dont use ES6, but I also tried it, not working.

This what I type in Vue.js

import Canvas from './canvas.js';

Canvas.js

export default class Canvas{
contructor(){
    this.devices = ["5", "15"];
}

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.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)

UPD: My issue that the code doest not compile after "import", and I have this .

but If i put "import" to comment "//" the situation is like

UPD2: The full Vue.js file

//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)
     }
   }
 });

canvas.js

export default class Canvas{
contructor(){
    this.devices = ["5", "15"];
}

my index.html

<div id="vue1">
    <ul v-for="ar in arr2">
        <li>{{ ar }}</li>
    </ul>
    <button v-on:click="addArr1(15)">CLICK</button>
</div>

How are you trying to access devices? Because with the current code, you have to create a Canvas instance first. — user5734311
– user5734311, Commented May 8, 2019 at 16:46
import isn't officially supported in a browser environment yet. Transpiling means taking ES6 modules (files) that use import and export and turning them into a single bundle.js file. You seem to be using pure client-side Vue, so you can't use import like that. What you can do is put a <script> in your HTML and use const Canvas = { devices: ["5", "15"] };, now your Vue script should be able to use Canvas.devices. — user5734311
– user5734311, Commented May 8, 2019 at 18:07

zero298 · Accepted Answer · 2019-05-08 18:27:38Z

0

Using ES Modules in the browser requires you to use a different mechanism to load the scripts. Essentially, you should have an "entry point" that you load and that can import varying modules you need to run. This entry point should be defined using a <script type="module" src="whatever.js">, note the type="module. You can read about it here: MDN <script>.

If you don't use type="module", you can't use import unless you run a transpiler like webpack. Vue has a bootstrapping application that helps you set up a Vue project that leverages webpack here: vue-cli.

Your application will effectively look something like this:

Canvas.js

export default class Canvas {
  contructor() {
    this.devices = ["5", "15"];
  }
}

my-cool-script.js

import Vue from "https://unpkg.com/[email protected]/dist/vuex.esm.js";
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)
    }
  }
});

index.html

<script src="my-cool-script.js" type="module"></script>
<div id="app"></div>

If you do not use type="module", you cannot use import without transpiling. Your project would basically look like this:

Canvas.js

class Canvas {
  contructor() {
    this.devices = ["5", "15"];
  }
}

my-cool-script.js

var app1 = new Vue({
  el: '#vue1',
  data: {
    arr2: [8, 7, 6, 5]
  },
  methods: {
    addArr1: function(num) {
      this.arr2.push(num)
    }
  }
});

index.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="Canvas.js"></script>
<script src="my-cool-script.js"></script>
<div id="app"></div>

edited May 8, 2019 at 18:27

answered May 8, 2019 at 18:18

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ordec Over a year ago

I dont use ES, if it only to add import Vue from "unpkg.com/[email protected]/dist/vuex.esm.js"; I did it, and followed ur instruction, but still not working

zero298 Over a year ago

@Ordec Unless you use type="module", you cannot use import without running through a transpiler like webpack. You'll have to include both scripts explicitly in the HTML and remove the import.

Ordec Over a year ago

idk why, but any attempt of using import causes not compiling the code below of it

Ordec Over a year ago

ok, I wonder will my code work, if i will add <script src="canvas" type="module"></script>? I did it, its not working, or I necesseraly have to use webpack TO MAKE MY CODE WORK (caps bcs that the goal). In the condition that I dont use webpack and ES, are there any possible chance to make access to canvas?

Collectives™ on Stack Overflow

How to declare javascript class instance in vue?

1 Answer 1

Canvas.js

my-cool-script.js

index.html

Canvas.js

my-cool-script.js

index.html

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Canvas.js

my-cool-script.js

index.html

Canvas.js

my-cool-script.js

index.html

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related