Import javascript class in vueJS

Question

I want to use a javascript class in may Vue application.

My class looks like:

class className { 
   constructor() { 
       ... 
   }  

   function1() { 
       ... 
   }  

   static funtion2() {
        ... 
   } 
}

I tried to import this class in my application like:

import className from './fileName.js';
var {className} = require('./fileName.js')

In all cases I receive when I want to call a function of the class (className.function2()): the function is undefined.

do not forget to export you "class" from the module where it is declared — GibboK
– GibboK, Commented May 7, 2018 at 13:09
@GibboK - did you mean to export the class where I imported? I'm using from the same module. I'm using webpack. — Kutas Tomy
– Kutas Tomy, Commented May 7, 2018 at 13:11

Tnc Andrei · Accepted Answer · 2018-05-07 13:44:42Z

22

You need to export the class to be able to import/require it

//1. For import syntax
export default class className {...}

//2. For require syntax
class className {}
module.exports.className = className
//or
module.exports = {
    className: className
}

edited May 7, 2018 at 13:44

answered May 7, 2018 at 13:29

Tnc Andrei

1,11210 silver badges16 bronze badges

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

1 Comment

Deepak Bandela Over a year ago

This didn't work for me. I see "module.exports" is undefined for me. Unable to set module.exports.MyClass = MyClass TypeError: Cannot set property 'MyClass' of undefined

baao · Accepted Answer · 2018-05-07 13:30:54Z

9

Using import/export, you'd use

export class className {}

and

import {className} from '<file>';

answered May 7, 2018 at 13:30

baao

73.5k18 gold badges152 silver badges208 bronze badges

Comments

AntoineP · Accepted Answer · 2023-06-13 09:16:21Z

0

Compare to @baao answer, I add the default keyword for the export.

export default class className {}

and in the component.vue file:

<script>
import className from '<pathToFile>';
...
</script>

answered Jun 13, 2023 at 9:16

AntoineP

3,0831 gold badge21 silver badges22 bronze badges

Collectives™ on Stack Overflow

Import javascript class in vueJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related