Both Vue export default Vs new Vue() are used in Vue applications, but serve different purposes. Knowing what they do is crucial when working with Vue 2 and Vue 3 with modular setups.
What does export default Do in Vue?
In Vue, export default is used to define and export a component or a configuration object from a .vue or .js file. This allows other files to import and use it.
Example: Exporting a Component
// MyComponent.vueexport default { name: ‘MyComponent’,
props: [‘title’],
template: `<h1>{{ title }}</h1>`
}
This makes MyComponent importable in other components:
import MyComponent from ‘./MyComponent.vue’
What Is new Vue() Used For?
In Vue 2, new Vue() is used to create the root Vue instance and mount it to the DOM.
Example: Root Instance
new Vue({ render: h => h(App)
}).$mount(‘#app’)
This is the entry point in Vue 2 applications (main.js), where you mount the main component (App.vue) to the page.
Vue 3 Changes: Using createApp() Instead
In Vue 3, the root instance is created using createApp() instead of new Vue():
import { createApp } from ‘vue’import App from ‘./App.vue’
createApp(App).mount(‘#app’)
Here, App is exported via export default and then passed to createApp().
Differences Between export default and new Vue()
This table shows the functional and contextual differences between export default and new Vue() in Vue.js development.
| Feature |
export default |
new Vue() |
| Purpose |
Export component/module |
Initialize Vue root instance |
| Vue Version |
Vue 2 & Vue 3 |
Vue 2 only |
| Usage Context |
Inside components/modules |
Entry point (main.js) |
| Reusability |
Reusable in multiple files |
Used once to mount the app |
Also Read: The Top Websites Built with Vue JS
Common Mistakes to Avoid
- Using new Vue() inside a component – should only be in the root file.
- Forgetting to export default a component makes it unusable elsewhere.
- Mixing Vue 2 and Vue 3 syntax without understanding their differences.
Key Takeaway
Use export default to define and share components. Use new Vue() (Vue 2) or createApp() (Vue 3) to bootstrap your app from the root.
Related Resources
