How to add multiple exports in vue.js?

by tressie.damore , in category: Javascript , 2 years ago

How to add multiple exports in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by deron , 2 years 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:

  1. 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,
}


  1. 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)
})


  1. 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.

Related Threads:

How to add multiple object id to mongodb using vue.js?
How to implement multiple middlewares in vue.js 3?
How to upload multiple images as an array in vue.js?
How to add multiple data at once in laravel?
How to add multiple test reports to sonarqube?
How to add multiple users in bitbucket team?