vue create component

1//-------------------- This is your main vue file
2<template>
3<h1>Your File Name Title</h1>
4<p>Random text</p>
5// now import your component here --- see below comments to find the component code
6<ComponentName />
7</template>
8<script>
9  import ComponentName from '/componentlocation'
10export default{
11name: 'MainFile',
12components: {
13	ComponentName
14}}
15</script>
16
17//------------ This is the component code in a different file
18
19<template>
20<h1>This is the component</h1>
21</template>
22
23<script>
24export default{
25name: 'ComponentName'
26}
27</script>
28

1// Create Vue application
2const app = Vue.createApp(...)
3
4// Define a new component called todo-item
5app.component('todo-item', {
6  template: `<li>This is a todo</li>`
7})
8
9// Mount Vue application
10app.mount(...)

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