Vue export default vs Vue new

In this article, you will learn about the difference between Vue export default and Vue new.

Vue is a progressive JavaScript framework used to build web interfaces and one-page applications. To work with Vue you need to declare it. Let’s see the ways of declaring it:

Using Vue new:

You can create a Vue instance by calling new Vue(). It is basically a JavaScript Object. The syntax for using it is shown below:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

This refers to the root Vue instance from which the rest of the application comes down. and it will work with the HTML document. See the example below:

Using export default:

Another way is declaring a component. In Vue you can create a component and register it. You may also reuse it later if you needed. Let’s see an example of creating a single component named “TestOne” and reusing it into another component named “TestTwo” in the below section:

// TestOne.vue
export default {
    name: 'TestOne',
    data () {
      return {}
    }
}

Here, we have defined single component and let’s use it into another component:

// TestTwo.vue
<template>
  <TestOne/>
</template>
<script>
  import TestOne from './components/TestOne.vue'
  export default {
                name : 'TestTwo'
    components: {
      TestOne
    }
    data () {
      return {}
     }
      ----
  }
</script>

You can see that we can reuse the component “TestOne” in another component named “TestTwo” by using export default. You can use export-default for creating local registration for the Vue component.