CODEWITHSUNDEEP
javascriptwebpackvue.jsecmascript-6
Negar
Negar

Reputation: 659

How to import a function to a Vue component?

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.

Upvotes: 10

Views: 22554

Answers (2)

José A. Zapata
José A. Zapata

Reputation: 1297

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.

Upvotes: 2

connexo
connexo

Reputation: 56773

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';

Upvotes: 15

Related Questions