Hey there! Let's walk through the most common culprits when your Header component won't render even after registering it, plus cover the vue-template-webpack-plugin angle:

1. Component Naming Conflict with Native HTML Elements #

Vue has a gotcha with components named Header—since <header> is a native HTML tag, Vue might prioritize the native element over your custom component. Try renaming it to something like AppHeader to avoid this clash:

// main.vue
import AppHeader from './header.vue'

export default {
  components: {
    AppHeader
  }
}

Then use kebab-case in your template (the recommended convention for custom components):

<template>
  <app-header></app-header>
  <!-- Rest of your main content -->
</template>

2. Missing Single Root Element (Vue 2 Only) #

If you're using Vue 2, every component must have a single root element in its template. Double-check your header.vue—it should look something like this:

<template>
  <div class="header-container">
    <h1>My App Header</h1>
    <!-- All header content wrapped in one root -->
  </div>
</template>

Vue 3 allows fragment syntax (multiple root elements), but Vue 2 will fail silently or throw errors if this rule is broken.

3. Incorrect Registration Scope #

Make sure you're registering the component in the right scope:

• Local registration: If you only need the Header in main.vue, import and register it directly there (like the example in point 1).
• Global registration: To use it across all components, register it in main.js:

// main.js
import Vue from 'vue'
import AppHeader from './header.vue'

Vue.component('app-header', AppHeader)

4. vue-template-webpack-plugin & Webpack Setup Checks #

If you're using this plugin, here are key configuration fixes:

• Ensure you have both vue-loader and vue-template-webpack-plugin installed, and your webpack.config.js includes the required setup:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

• Verify your vue-template-compiler version matches your Vue version. Mismatched versions will cause template compilation failures. Run npm list vue vue-template-compiler to check—they should share the same major/minor version.

5. Always Check the Browser Console #

Don't skip the developer console! Even if the component doesn't render, you'll likely see warnings (like "Unknown custom element") or errors that pinpoint the exact issue—whether it's a missing import, naming conflict, or compilation problem.

内容的提问来源于stack exchange，提问作者JGleason