How to import a function to a Vue component?

5
votes

I am trying to import a single function to my Vue component. I've created a separated js file for my function:

randomId.js:

exports.randomId = () => //My function ...

In my Vue component, I've imported the Random js:

let randomId = require('../functions/randomId');
randomId();

but Webpack throws an error of "randomId is not a function". I tried to import the file using import syntax, but the error remains.

import randomId from '../functions/randomId';

Should I use some other methods for importing single functions? I'm relatively new to Webpack and JS6.

2
javascriptwebpackvue.jsecmascript-6
You may find this article helpful – craig_h

2 Answers

8
votes

Change your function module to properly use ES6 export:

export function randomId() { /*My function ...*/ }

And then use ES6 named import:

import { randomId } from '../functions/randomId';
1
votes

If you want to use CommonJS, then in the file with your randomId function do the following:

function randomId() {
   ...
}

module.exports = randomId;

And then the let randomId = require('../functions/randomId'); in your Vue component will work.