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

Question

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

Answer 1

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 component 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')