How to add multiple exports in vue.js?
How to add multiple exports in vue.js?
1 answer
by
deron ,
6 months ago
@tressie.damore
In Vue.js, you can only have a single default export per file. However, you can group multiple components or functions into an object and export that object. Here's how you can do it:
- Create a new JavaScript file for exporting multiple components or functions. For example, in a file named components.js:
1 2 3 4 5 6 7 8 9 |
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
import Component3 from './Component3.vue'
export default {
Component1,
Component2,
Component3,
}
|
- In your main file where you import the components or functions, you can import the whole object and use them as properties:
1 2 3 4 5 6 7 8 9 |
import Vue from 'vue'
import Components from './components.js'
Vue.use(Components)
new Vue({
el: '#app',
render: h => h(App)
})
|
- Now you can use the exported components or functions in your Vue templates or scripts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div>
<component1></component1>
<component2></component2>
<component3></component3>
</div>
</template>
<script>
export default {
components: {
Component1: Components.Component1,
Component2: Components.Component2,
Component3: Components.Component3,
},
}
</script>
|
By exporting multiple components or functions as an object, you can easily manage and import them across your project.