Vue 'export default' vs 'new Vue'

Question

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following:

export default {
    name: 'app',
    data: []
}

Whereas in other tutorials I see data being bound from:

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

What is the difference, and why does it seem like the syntax between the two is different? I'm having trouble getting the 'new Vue' code to work from inside the tag I'm using from the App.vue generated by the vue-cli.

score 233 · Accepted Answer · edited Dec 24 '20 at 06:31

233

When you declare:

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

That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

The other syntax is declaring a component which can be registered and reused later. For example, if you create a single file component like:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

You can later import this and use it like:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

Also, be sure to declare your data properties as functions, otherwise they are not going to be reactive.

edited Dec 24 '20 at 06:31

jasonandmonte

1,869
2
15
24

answered Feb 11 '18 at 03:40

9

Okay, so whenever you're working in a "MyApp.vue" component file, you'll be using the "export default {}" syntax, but otherwise if you're just using Vue in a plain HTML file, you'll be using "new Vue({})", correct? – rockzombie2 Feb 11 '18 at 06:08
6

Generally speaking, yes. Whether you create the root instance in the HTML doc itself or an external file - i.e `main.js` - doesn't really matter, just know that it is the starting point of the application, akin to `int main()` in C. `Component.vue` files will always use the `export default { ... }` syntax. The docs do a good job explaining the differences between components, [global](https://vuejs.org/v2/guide/components.html#Global-Registration), [local](https://vuejs.org/v2/guide/components.html#Local-Registration), and [single file](https://vuejs.org/v2/guide/single-file-components.html) – Feb 11 '18 at 06:53
1

I am following the first new Vue({ el: '#app', data () { return {msg: 'A'} } )} Then When I try to use {{msg}} Property or method "msg" is not defined on the instance but referenced Why ? @user320487 – user123456 Nov 15 '19 at 09:37
1

First time looking into Vue.js here and I'm confused. For your component, you're already declaring `export default` with `data()` and probably all the `styling` too. Why do you have to do everything again after importing the component? – user3758745 Jan 05 '21 at 23:23

score 16 · Answer 2 · edited Feb 20 '23 at 08:26

16

export default is used to create local registration for Vue component.

edited Feb 20 '23 at 08:26

blackgreen

34,072
23
111
129

answered Aug 24 '18 at 15:40

atrichkov

450
3
6

score 9 · Answer 3 · edited Jul 15 '22 at 02:46

The first case (export default {...}) is ES2015 syntax for making some object definition available for use.

The second case (new Vue (...)) is standard syntax for instantiating an object that has been defined.

The first will be used in JS to bootstrap Vue, while either can be used to build up components and templates.

See https://v2.vuejs.org/v2/guide/components-registration.html for more details.

score 6 · Answer 4 · answered Oct 04 '19 at 07:30

Whenever you use

export someobject

and someobject is

{
 "prop1":"Property1",
 "prop2":"Property2",
}

the above you can import anywhere using import or module.js and there you can use someobject. This is not a restriction that someobject will be an object only it can be a function too, a class or an object.

When you say

new Object()

like you said

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

Here you are initiating an object of class Vue.

I hope my answer explains your query in general and more explicitly.

Vue 'export default' vs 'new Vue'

4 Answers4

Linked