Understanding export statement in Vue

Question

I am coming from React and Vue frankly seems to be way different to me even from Javascript prospective.

From the boiler plate code (HelloWorld.vue), Say we have the following code snippet

 <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br />
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
            >vue-cli documentation</a
          >.
        </p>
</template>


<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;

</style>

Here, I am unable to comprehend how does our export default knows What we need to export

Since the question was marked closed due to duplicate, Sharing the difference between the both

Consider, In case of react (or take it as any function) if we created a function

const someFunc = () => (
   <div> 
   <h1> Test Component </h1>
   </div>
)

export default someFunc

Here i am exporting my somefunc which I can import and use it with whatever way I want in other component

import Whatever from "./location"

But in the above Vue snippet, I cannot comprehend the significance of

export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};

What is the significance of exporting this object?

Also, where would If suppose I need to will I write my functions, class?

It knows what to export because it immediately follows the words `export default`. Everything in the `{}` gets exported as the default. — ceejayoz, Feb 07 '19 at 22:43
Possible duplicate of [What is "export default" in javascript?](https://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript) — ceejayoz, Feb 07 '19 at 22:44
It's hard to say what you mean by "significance", but the significance is the same as exporting any function or object in JavaScript. You're creating an encapsulated piece of code with its own properties and functions. You can include additional functions on the `methods` property, or import as helper functions. If you want to you can also write functions inside of the script tags above the export. — Charlie Stanard, Feb 07 '19 at 23:22

score 1 · Answer 1 · answered Feb 08 '19 at 15:53

Everything inside the curly braces on export default {} including methods and data will be exported, and can be imported using import like in your example on React

import Whatever from "./location"

Just to answer your question

Also, where would If suppose I need to will I write my functions, class?

Methods and other data can be included inside the curly braces on export default {}. For example,

<script>
  export default {
    name: "HelloWorld",
    props: {
      message: {
        type: String
      }
    },
    data() {
      return {
        // put any data here, e.g.,
        isVueDeveloper: true
      }
    },
    methods: {
      // put any methods here, e.g.,
      firstMethod() {
        return;
      }
    }
  }
</script>

Understanding export statement in Vue

1 Answers1