Export multiple Vue components

Question

I am creating a node_module with Vue SFC components for consumption of different projects.

So on my module's index.js (main entry point), I have this:

import component1 from './src/input-box1.vue'
import component2 from './src/input-box2.vue'

export default component1

Above works well for component1 but I don't know how to export component2.

I tried doing this:

export { component1 }
export { component2 }

But I'm getting an error:

Unknown custom element: <component1> - did you register the component correctly? For recursive components, make sure to provide the "name" option

Import is like this:

import component1 from 'sample-vue-components'

Any ideas??

export default { component1, component2, ... } or export component1; export component2; .. — Ashwin Bande
– Ashwin Bande, Commented Jan 19, 2021 at 9:24

David ROSEY · Accepted Answer · 2021-01-19 09:26:10Z

6

If you don't put {} it is the default export that will be imported. Try modifying your export/import like:

in your sample-vue-components.vue:

import component1 from './src/input-box1.vue'
import component2 from './src/input-box2.vue'

export { component1, component2 };

Then import them like:

import { component1, component2 } from 'sample-vue-components'

answered Jan 19, 2021 at 9:26

David ROSEY

1,8132 gold badges11 silver badges24 bronze badges

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

1 Answer 1