Export custom javascript file to a Vue component

Question

I am a beginner in Vue.js and so this question might be duplicate or naive. I want to call functions defined in a custom javascript file within a Vue component. I did something like this.

custom.js

class API{
    function testCall(){
        alert("test ok");
    }
}

export {API}

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <testcomponent :on-click="getData">
    </testcomponent>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import TestComponent from './components/TestComponent.vue';
import API from './js/custom.js';

export default {
  name: 'app',
  components: {
    HelloWorld,
    TestComponent,
    API
  },
  methods: {
    getData(){
        const apiObj = new API();
        apiObj.testCall();
      }
  }
}
</script>

When I build using npm run build, I get below error.

Any help with this please?

Vamsi Krishna · Accepted Answer · 2018-07-11 11:00:39Z

2

1: To define methods in a class you do not need function keyword.

class API{
    testCall(){
        alert("test ok");
    }
}

2: Since you are doing a named export using export {API}, your import statement should be

import {API} from './js/custom.js';

3:components options is for registering vue components locally. Since API is not a vue component remove it from the components option.

answered Jul 11, 2018 at 11:00

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

4 Comments

Souvik Ghosh Over a year ago

One more clarification- some of my functions are using axios for AJAX calls. How do I get access to the external libraries like- axios, jQuery in the custom.js?

Vamsi Krishna Over a year ago

@SouvikGhosh import those modules using import statement. For e.g. to use axios import it using import axios from 'axios'

Souvik Ghosh Over a year ago

I tried importing it in my custom.js file and also App.vue file but none of them worked and I got build error. Also tried using require("axios") but did not work.

Souvik Ghosh Over a year ago

Never mind. It works. I just had to install axios from npm. Thanks!!

IVO GELOV · Accepted Answer · 2018-07-11 11:01:34Z

2

API is not a Vue component - you should not include it inside the components branch. Also, if this is just a bunch of utility functions you can either export them one by one or as a containing object

// util.js - individual functions
export function testCall (call) {};
export function testUser (user) {};

// Vue app
import { testCall, testUser } from 'util.js';


// util.js - object group
function testCall (call)
{
}

function testUser (user)
{
}

export default
{
  testCall,
  testUser
}

// Vue app
import API from 'util.js';

answered Jul 11, 2018 at 11:01

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Export custom javascript file to a Vue component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related