Which way better to create vue component (export default vs defineComponent vs new Vue)

2
votes

After learning Vue.js lately, i'm pretty match confused about how to write vue component syntax i keep seeing youtube tutorials, as well as articles, and everyone uses a different approach.

in terms of vue 3 should we use export default to create a component or export default defineComponent or new Vue({

so how to decide the right way on how to create App component and the rest of its child components and pages etc ..

Hopefully my question is clear enough.

Thanks

1
vue.jsvue-componentvuejs3

1 Answers

3
votes

If you need to create multiple components I would highly recommend using Single File Components (SFC)

Here you define a new component as (inside the <script> tag):

import { defineComponent } from 'vue'
export default defineComponent({
  // ...
})

(or export default {} if not using TypeScript)

For the main app componenet you would do this:

import { createApp } from "vue";
const app = createApp(App)
app.mount('#app')

OR just like this, if you don't need to extent Vue with vue-router, Vuex etc.

import { createApp } from "vue";
createApp(App).mount('#app')