vue3 header

1. Import Vue and define the component:

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Header',
  data() {
    return {
      title: 'Welcome to My App',
    };
  },
});

1. Add the template:

export default defineComponent({
  // ...
  template: `
    <header>
      <h1>{{ title }}</h1>
    </header>
  `,
});

1. Style the component:

export default defineComponent({
  // ...
  styles: `
    header {
      background-color: #333;
      color: white;
      padding: 10px;
    }

    h1 {
      margin: 0;
    }
  `,
});

1. Use the component in another Vue component:

<template>
  <div>
    <Header />
    <!-- Other content -->
  </div>
</template>

<script>
import Header from './Header.vue';

export default {
  components: {
    Header,
  },
};
</script>

1. Register the component globally:

import { createApp } from 'vue';
import App from './App.vue';
import Header from './Header.vue';

const app = createApp(App);
app.component('Header', Header);
app.mount('#app');

Each step is explained in code comments.