Unable to transfer Vue.js components in and out of the project

Question

Unable to transfer Vue.js components in and out of the project

I have a directory structured like this.

VueTree
  components
    Classic.vue
    Modern.vue
  index.js

The Classic and Modern components consist of a template, export default {}, and a style. I am importing both of them in index.js as:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree= {
  Classic ,
  Modern 
}

export default VueTree

However, when I try to import the module using:

import {Classic , Modern } from '../../modules/VueTree/index.js'

I encounter the following error:

Unknown custom element: - Did you register the component correctly? For recursive components, make sure to provide the "name" option.

Although I have defined name: "Classic" within my components and included it in the current file using components: { Classic },, the same error persists.

It seems to only work if I export just one component like this:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'
export default Classic

This method works for including Classic, but I am unable to export both components simultaneously as shown in this example https://github.com/greyby/vue-spinner/blob/master/src/index.js

javascript npm vue.js vuejs2 vue-component

Answer 1

Answer №1

To achieve named exports in JavaScript, make sure to utilize the export keyword instead of export default:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

export {
  Classic,
  Modern
}

For more information, refer to: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Answer 2

To achieve named exports in JavaScript, make sure to utilize the export keyword instead of export default:

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

export {
  Classic,
  Modern
}

For more information, refer to: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Answer 3

Answer №2

Your setup appears to be in good shape.

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree = {
  Classic,
  Modern
}
export VueTree

The issue lies with your components. It seems that you are using a Treeview, which involves a recursive component. Be cautious when creating them to avoid triggering an infinite loop.

Check out my github for an example of how the VueTree should function.

Ps: Remember to include a key and name for a recursive component.

Components can recursively call themselves within their template, but only when utilizing the name option. - Vue Docs.

If the above solution doesn't work, feel free to share a github link to the problem, and I'll gladly assist.

Answer 4

Your setup appears to be in good shape.

import Classic from './components/Classic.vue'
import Modern from './components/Modern.vue'

const VueTree = {
  Classic,
  Modern
}
export VueTree

The issue lies with your components. It seems that you are using a Treeview, which involves a recursive component. Be cautious when creating them to avoid triggering an infinite loop.

Check out my github for an example of how the VueTree should function.

Ps: Remember to include a key and name for a recursive component.

Components can recursively call themselves within their template, but only when utilizing the name option. - Vue Docs.

If the above solution doesn't work, feel free to share a github link to the problem, and I'll gladly assist.

Answer 5

Answer №3

Another approach

main.js

export { default as OldSchool } from './components/OldSchool.vue'
export { default as Trendy } from './components/Trendy.vue'

Trendy.vue

import { OldSchool } from './components/main';

export default {
   components: { OldSchool }
}

NOTE: Make sure to export child components just before the parent component in main.js.

Answer 6

Another approach

main.js

export { default as OldSchool } from './components/OldSchool.vue'
export { default as Trendy } from './components/Trendy.vue'

Trendy.vue

import { OldSchool } from './components/main';

export default {
   components: { OldSchool }
}

NOTE: Make sure to export child components just before the parent component in main.js.

Answer 7

Answer №4

In my opinion, it is more optimal to approach it this way 🤔

app.js / app.ts

import MainComponent from './MainComponent.vue'
import SubComponent from './SubComponent.vue'

export default MainComponent

export { SubComponent }

AppComponent.vue

import MainComponent, { SubComponent } from '~/components/abstractComponent'

export default {
   components: {
       MainComponent,
       SubComponent
   }
}

Answer 8

In my opinion, it is more optimal to approach it this way 🤔

app.js / app.ts

import MainComponent from './MainComponent.vue'
import SubComponent from './SubComponent.vue'

export default MainComponent

export { SubComponent }

AppComponent.vue

import MainComponent, { SubComponent } from '~/components/abstractComponent'

export default {
   components: {
       MainComponent,
       SubComponent
   }
}

Unable to transfer Vue.js components in and out of the project

Answer №1

Answer №2

Answer №3

main.js

Trendy.vue

Answer №4

Similar questions

What is the correct method of implementing the "OnChange" event to a WooCommerce select element?

Preserve the existing value and then check it against the updated value of a variable within JavaScript

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Issue with prop inheritance in componentInheritance problem with passing props to

Delete one object and then sequentially rename all remaining objects

Enable automated addition or alteration of phone numbers through Twilio's API

Express does not provide a 304 response code for static json files

using reactjs to dynamically render elements based on the selected condition in a select box

What are the steps for creating a new npm package based on an existing one?

I'm having trouble running my React app on localhost. What steps can I take to fix this issue?

Tips for assigning a class name to a variable element within a react component?

Is there a way to shut down a browser tab without being asked, "Are you sure you want to close this window"?

Generate an interactive pie chart with visually appealing animations using jQuery, without any actual data

Storing Data with expressjs/session in NodeJS

Implementing a secure route in React that asynchronously checks user authentication status

The error message "bind this is not defined in react" is displayed when attempting to read

html form submission error - please refresh

What is the most efficient way to transfer a large volume of documents from mongoDB using http?

Error compiling: Cannot locate module '../../common/form' within 'src/components/time'

Moving an item to the top of an array in JavaScript/Vue.js: A simple guide