Vue component not recognised? Very basic setup. The "header" component has been registered-CodePudding

I'm trying to get this header component to be recognised and it just isnt. I've tried messing setting eslint to strict, and messing with my syntax to no avail. I don't get it, this should be so simple. ANy help would be appreciated.

App.vue

<template>
  <div class="container">
    <header />
  </div>
</template>

<script>
import header from './components/header'

export default {
  name: 'App',
  components: {
    header,
  }
}
</script>

<style>

</style>

main.js

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

createApp(App).mount('#app')

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

header.vue

<template>
    <header>
        <h1>Component header</h1>
    </header>

</template>

<script>
export default {
    name: 'header',
};
</script>

<style>
    header {
      display: flex;
    }
</style>

Any help would be awesome. Thankyou.

CodePudding user response：

The main.jsneeds to be imported into the index.html:

  <body>
    <div id="app"></div>
    <script type="module" src="/src/js/main.js"></script>
  </body>

(using the correct path)

It is better to rename your header component to another word, because <header> is used as a standard tag name in html