Issue Occurred when Trying to Import External Class in Vue Component

I am having trouble importing an external JavaScript file that contains a Form Class into a Vue Component.

My File Structure is as follows:

js
- components
-- dashboard
--- dashboard.vue
- app.js
- form.js

I have attempted to import the Form Class using various methods, but I keep encountering errors.

import Form from '../../form.js'
import Form from '../../form'
import Form from './form'

The content of form.js is as follows:


export default class Form{
    // Implementation Here
}

In dashboard.vue, my code snippet looks like this:

<template>
    // Code
</template>

<script>
   import Form from '../../form.js' <- not working
   import Form from '../../form'    <- not working
   import Form from './form'        <- not working

   export default{
      name: 'Dashboard',
      data(){
         return [
           form: new Form({
               field1: '',
               ...
           })
         ]
      }
   }
</script>

If anyone could assist me with resolving this issue, it would be greatly appreciated. Thank you!

Answer №1

In order to utilize the desired class, you must export it.

export class className {}

Additionally,

import {className} from '<file path>';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Multiple buttons are linked to a function, causing the sharing of internal variables

I have a situation where I need to bind ajax calls to multiple buttons, each button being unique based on attached data attributes. The issue arises when the internal variables of the function are shared among different buttons. This leads to problems if ...

Auto-updating Angular $scope variables

I am facing an issue with two variables in my code. Whenever I update one variable, the other variable also gets updated automatically. Can someone please help me understand what is causing this behavior? $scope.pages = []; $scope.pagesSave = []; var fun ...

To optimize the code, consider replacing the file:///home/ishan/.../node_modules/chai/index.mjs require statement with a dynamic import() function that can be used in all CommonJS modules

Currently, I am using the newest version of Hardhat on WSL. Following the demonstration provided by Hardhat, I have installed the npm packages for hardhat toolbox. However, I am encountering an error that is unclear to me. Initially, I was utilizing the & ...

Incorporate a collection of multiple images into Fancybox

Can someone help me figure out how to use fancybox to display a series of images in a lightbox? I have this JS object called fancybox_img, and here's what it contains: {card_173: Array(1), card_171: Array(5), card_169: Array(4)} card_169: Array(4) 0: ...

What methods are most effective when utilizing imports to bring in components?

Efficiency in Component Imports --Today, let's delve into the topic of efficiency when importing components. Let's compare 2 methods of importing components: Method 1: import { Accordion, Button, Modal } from 'react-bootstrap'; Meth ...

Easily modify and manage state on-the-fly using TextFields

Is the title conveying my intentions clearly? If not, please let me know. Essentially, I am looking to create a component that generates a form based on a JSON file. For example, if someone clicks on "light" in the navbar, I want the form to display fields ...

Gulp JS task is generating a NodeError due to the callback being triggered more than once

Error Encountered in Gulp JS Task - NodeError: Callback called multiple times Among the five Gulp JS tasks that I have, one specific task named js_bundle is causing a NodeError. The exact error message is: NodeError: Callback function called multiple ti ...

Modify content once it has been rendered using Jquery

After loading, I want to adjust the style of a specific element. However, I am running into a null pointer issue. function loadFriends() { $("#friendsContainer").load("friends.html"); } selectCurrentSetting(); function selectCurrentSetting() { c ...

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...

Is Node.js categorized as multithreading due to its utilization of worker threads?

Throughout my life, I was under the impression that Node.js and JavaScript operated as a single threaded language. It was always said that Node.js wasn't ideal for CPU intensive tasks due to its single threaded nature. Multithreading, on the other han ...

Vue.js isn't triggering the 'created' method as expected

I have a main component called App.vue. Within this component, I have defined the created method in my methods object. However, I am noticing that this method is never being executed. <template> <div id="app"> <Header /> <Ad ...

The attribute 'completed' is not found in the 'EventTarget' interface

When using ion-refresher in Ionic Vue, I encountered an issue. The documentation suggests ending with 'event.target.complete()' but this results in the error: Property 'complete' does not exist on type 'EventTarget'. I am fol ...

Exchange information among unrelated components

I'm working on implementing a vue event bus to facilitate event communication between my components. In my app.js file, I have included the line Vue.prototype.$eventBus = new Vue();. Within one component, I trigger an event using: this.$eventBus.$emit ...

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

Tips on Modifying JSON Objects with JavaScript

In the code I'm working with, there's a generated line that creates an animated sidebar using a div. The width of this sidebar is controlled by the 'v' parameter, currently set to 85. <div id="sidebar" class="inner-element uib_w_5 ...

Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector. <div class="preloader"> <div class="cssload-speeding-wheel"></div> </div> <section id="wrapper" class="login-register"> <div class="login-box"> <d ...

An issue arises when attempting to fetch data using next.js: a TypeError occurs indicating that

I'm currently working on setting up a next.js website integrated with strapi, but I've encountered an issue with my fetch request. Oddly enough, when I test the request using Postman, the data is successfully returned, indicating that the endpoin ...

Troubleshooting imagejpeg() Function Failure in PHP Server

I've been working on implementing image cropping functionality for my website. I've managed to send an array of cropped image dimensions (x, y, width, height) to my PHP script. On my localhost, the script successfully crops the image, but unfort ...

Ways to avoid an infinite loop caused by onAuthStateChanged Firebase Authentication

I have a provider setup that initializes the authentication context from Firebase Auth. Everything is working well, but when I tried to introduce persistence by adding an observer with onAuthStateChanged, it caused an infinite loop. Despite including an u ...

Accessing keys or data in a JSON/JavaScript object stored in the state after fetching cannot be done using dot or bracket notation

Currently delving into the world of react-native following experience with React, I've encountered a perplexing issue that has left me scratching my head. Upon fetching a JSON file from an API and storing it in my state, I faced errors when attemptin ...