JAVASCRIPT

vue 3 create component

//-------------------- This is your main vue file
<template>
<h1>Your File Name Title</h1>
<p>Random text</p>
// now import your component here --- see below comments to find the component code
<ComponentName />
</template>
<script>
  import ComponentName from '/componentlocation'
export default{
name: 'MainFile',
components: {
	ComponentName
}}
</script>

//------------ This is the component code in a different file

<template>
<h1>This is the component</h1>
</template>

<script>
export default{
name: 'ComponentName'
}
</script>

component in vue

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

vue create component

// Create Vue application
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
  template: `<li>This is a todo</li>`
})

// Mount Vue application
app.mount(...)