Use custom JavaScript code in a Vue.js app - Stack Overflow

admin管理员组

文章数量:1434972

I'm trying to insert JavaScript code in a Vue.js router app. I need to load data from the CMS the app is served from. In order to get the data from the CMS I have to use a JavaScript library from the CMS which is not made for Vue and is not exporting it's class/functions like modern JS. So I import the JS library from in the index.html by a script tag. This works as intended.

But now I have to use the class from this CMS JavaScript library. Before writing this as a Vue-Router app I just have used Vue for templating purposes. So I had some code packed in the window.onload event handler. I have to create an instance for the CMS data access class. But this leads to a build error (using vue-cli build). Since there are no understandable error messages from the build process I have to use trial and error. Even simple variable assignments like var a = 1 seem not to be allowed. A console.log('something') works. But nothing else seemes to be allowed (except defining the onload-event handler)

I have added this code in a <script> Tag inside App.vue (which was created by vue-cli create)

window.onload = function() {
    
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
}

UPDATE

After testing the different solutions from the answers I got aware that using non-instance variables seems to cause the build errors.

This gives an error:

        waitForPlayerData = true;

This works:

        this.waitForPlayerData = true;

I'm trying to insert JavaScript code in a Vue.js router app. I need to load data from the CMS the app is served from. In order to get the data from the CMS I have to use a JavaScript library from the CMS which is not made for Vue and is not exporting it's class/functions like modern JS. So I import the JS library from in the index.html by a script tag. This works as intended.

But now I have to use the class from this CMS JavaScript library. Before writing this as a Vue-Router app I just have used Vue for templating purposes. So I had some code packed in the window.onload event handler. I have to create an instance for the CMS data access class. But this leads to a build error (using vue-cli build). Since there are no understandable error messages from the build process I have to use trial and error. Even simple variable assignments like var a = 1 seem not to be allowed. A console.log('something') works. But nothing else seemes to be allowed (except defining the onload-event handler)

I have added this code in a <script> Tag inside App.vue (which was created by vue-cli create)

window.onload = function() {
    
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
}

UPDATE

After testing the different solutions from the answers I got aware that using non-instance variables seems to cause the build errors.

This gives an error:

        waitForPlayerData = true;

This works:

        this.waitForPlayerData = true;

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Oct 19, 2020 at 14:13 user2123796 asked Jul 27, 2020 at 10:05 user2123796user2123796 6111 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I wouldn't remend using window.load to run your code. There are more native approaches to do this in Vue.js.

What you should do in the case you want to run it in the main ponent of the app before it's been loaded is to put the code inside the beforeCreate lifecycle hook of the main ponent.

...
beforeCreate () {
  this.cmsDataLoader()
},
methods: {
  cmsDataLoader () {
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
  }
}
...

This will run the code everytime a ponent is created before the creation. You could also use the created lifecycle hook if you want to run it after the creation of the ponent.

Check the following link for more information about lifecycle hooks.

The best way to place JavaScript in Vue.js App is mounted function, it is called when the ponent is loaded:

export default {
    name: "ponent_name",
    mounted() {
        let array = document.querySelectorAll('.list_item');
    },
}

1. You don't need window.onload, you can just put whatever you want there. I'm not entirely certain when precisely in the lifecycle it renders and maybe someone can hop in and let us know but it for sure renders when page starts. (though it makes sense that it does before the lifecycle hooks even start and that it'll solve your needs)

2. Better & easier solution if you want to load it before Vue loads is to add it to the main.js file. You have full control there and you can load it before Vue initializes.

No need for window.onload there either, just put it before or import a JS file before you initialize Vue, because it's going to be initialized by order.

本文标签： Use custom JavaScript code in a Vuejs appStack Overflow