Loading custom scripts into Vue.js components

Question

I've decided to rewrite a web app using Vue.js but I'd like to start small and use my already working scripts for the main part of the app, while using Vue for other parts.

I'm looking into the Vue webpack template and I've tried to include multiple script tags into a component but vue gives me a warning that this can't be done.

I've successfully included the scripts into the main index.html and it's working but I think that's a really bad solution. What are some other ways to use Vue components with included js scripts?

• nils: Why do you need multiple script tags? Just to import other script dependencies?
• user370306: Well, it can be just one tag for the dependencies but vue-loader only allows 1 script tag and I'm wondering how to import my scripts into it? Using require my scripts will need to export the functions, is this the best option?
• Yerko Palma: yes it is, because you are using a module based loader as webpack, so the better option is to module.export your old scripts
• user370306: If this is the only viable option, please post your comment as an answer so I can accept it :)

Answer 1

Vue.js will work with any old scripts you have. If you are trying to "start small", just leave your old scripts on the page where they are, and start moving them slowly into components. https://jsfiddle.net/crabbly/14kvkL6d/

You could start moving parts of the scripts into the ready method on your components, and start organizing them later into separate methods. Eventually it will be very organized and you will be using the full power of Vue. https://jsfiddle.net/crabbly/9ux28qL9/

When using vue-loader and webpack, you will have to use module.export. Which shouldn't be hard also. Start with smaller components.