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 ponent. 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="Wele to Your Vue.js App"/>
    <testponent :on-click="getData">
    </testponent>
  </div>
</template>

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

export default {
  name: 'app',
  ponents: {
    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?

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 ponent. 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="Wele to Your Vue.js App"/>
    <testponent :on-click="getData">
    </testponent>
  </div>
</template>

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

export default {
  name: 'app',
  ponents: {
    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?

• javascript
• npm
• vue.js

Share Improve this question Follow asked Jul 11, 2018 at 10:44 Souvik GhoshSouvik Ghosh 4,6171313 gold badges5959 silver badges8383 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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:ponents options is for registering vue ponents locally. Since API is not a vue ponent remove it from the ponents option.

API is not a Vue ponent - you should not include it inside the ponents 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';