VueJs: importing custom js libraries

Question

I have a VueJS project that I started it with vue-cli webpack. I have a javascript library with functions that I need in all components. I wonder where I need to place this folder and how to call the functions from JSLibrary1 in Component1.vue:

-myJSLibrary
    JSLibrary1.js
    JSLibrary2.js

JSLibrary1.js

var A = A || (function() {
    class B {
        function C(){
            return “hello”;
        }   
    }       
    var obj = new B();
    return obj;
}());

Project structure

VueProject
   build
   config
   src
    assets
    components
        Component1.vue
    App.vue
    main.js
   static

Thanks.

Since you are using vue-cli, you are probably also using webpack. Start by taking a look at Single File Components and Webpack: Getting Started. — zero298
– zero298, Commented Jan 11, 2018 at 21:18
If you have webpack you can use import to lnclude external JavaScript code, but your library should also export its functions / classes. You could also just load the javascript file with a <script> tag in your HTML — Kokodoko
– Kokodoko, Commented Jan 11, 2018 at 21:23

tribe · Accepted Answer · 2019-03-15 17:23:25Z

11

libraries.js

export const A = () => {
  // your code
}

export const B = () => {
  // your code
}

Component1.vue

<script>
import { A, B } from '~/path/to/libraries.js'
export default {
  data () {
    return {}
  },
  mounted () {
    // execute A when components is rendered
    A()
  }    
</script>

edited Mar 15, 2019 at 17:23

answered Jan 12, 2018 at 11:54

tribe

3212 silver badges10 bronze badges

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

1 Comment

JoseVL92 Over a year ago

Good, but.....is there no possibility to use libraries.js in a module without exporting its properties?

Collectives™ on Stack Overflow

VueJs: importing custom js libraries

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related