Vue ‘export default’ vs ‘new Vue’

export default and new Vue are two different concepts in Vue.js, serving different purposes.

export default

export default is used to export a single default export from a module in JavaScript.
It is commonly used to export Vue components, allowing you to define the component’s options (such as data, methods, computed, etc.) and then export it for use in other parts of your application.

The exported component can then be imported and used in other Vue components or files.

Example:

// MyComponent.vue
<template>
 <div>{{ message }}</div>
</template>


<script>
export default {
 data() {
   return {
     message: 'Hello!'
   };
 }
};
</script>

new Vue

new Vue is used to create a new Vue instance, which represents a single Vue application or component tree.
It is used at the entry point of your application to initialize and mount the root Vue instance, which serves as the entry point for your Vue application.
You typically use new Vue in the main.js file (or similar) to initialize the root Vue instance and specify the root component, where your Vue application starts.

Example:

// main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
 render: h => h(App)
}).$mount('#app');

In this example, new Vue is used to create a new Vue instance and mount the App component to the element with the ID app in the HTML document.

In summary, export default is used to export Vue components for use in other parts of your application, while new Vue is used to create and initialize the root Vue instance of your application. They serve different purposes and are used in different contexts within a Vue.js application.