How to incorporate a JavaScript class into a VueJS project

Question

How to incorporate a JavaScript class into a VueJS project

Looking to incorporate a JavaScript class into my Vue application.

The class structure is as follows:

class className { 
   constructor() { 
       ... 
   }  

   function1() { 
       ... 
   }  

   static funtion2() {
        ... 
   } 
}

Attempting to import this class into my application using:

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

However, in all cases when attempting to call a function of the class (className.function2()), the function is coming up as undefined.

javascript vue.js

Answer 1

Answer №1

In order to use the import/require functionality, you must export the class first

//1. To use import syntax
export default class className {...}

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

Answer 2

In order to use the import/require functionality, you must export the class first

//1. To use import syntax
export default class className {...}

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

Answer 3

Answer №2

When employing the import/export functionality, the syntax would be as follows:

export class className {}

and you would also include:

import {className} from '<file>';

Answer 4

When employing the import/export functionality, the syntax would be as follows:

export class className {}

and you would also include:

import {className} from '<file>';

Answer 5

Answer №3

In contrast to @baao's response, I have included the use of the default keyword for the export.

export default class className {}

Additionally, in the file component.vue:

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

Answer 6

In contrast to @baao's response, I have included the use of the default keyword for the export.

export default class className {}

Additionally, in the file component.vue:

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

How to incorporate a JavaScript class into a VueJS project

Answer №1

Answer №2

Answer №3

Similar questions

What can cause an "Undefined index" error in an ajax POST request and/or PHP script?

Solving the Issue of Handling Custom Events in Javascript

AJV is failing to validate my body using the function generated by the compile method

Troubleshooting: Issue with append function not functioning properly after click event in Angular

How come my total isn't zero after I get a 1 on the dice roll?

Access information from JSON file

Generate HTML output from the container element of a Vue application

Error encountered on Windows 10 version 10.0.19044 during library installation with npm

Troubles encountered while deploying Vue.js application using IBM Cloud and Cloud Foundry Node Buildpack

Evaluate the functionality of an Angular controller method that interacts with the Document Object Model (

Moving Configuration Files in NextJS

Send a form without the need to reload the page

Is there a native feature in Vue.js that allows for the addition of a duplicate of a constantly saved object to an array that is repeated

JavaScript function encountered an error due to an expected object

When JSON data is copied and displayed in Node.js or JavaScript, it appears as a string

A mysterious issue arose while trying to retrieve the script (Service Worker)

Converting an array of object keys into integers only can be done using JavaScript

How do I go about showing every character on a separate line using a for loop?

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action