CODEWITHSUNDEEP
webpackvue.jswebpack-2
Tyler Mills
Tyler Mills

Reputation: 363

Importing Vue (Vue.js) Component Results in No Errors, But Doesn't Display

Pretty basic implementation of Vue here as a test run, and I'm having some issues breaking out data into components. Here is HTML:

<body>
    <header id="main-header">
       <custom-header></custom-header>
    </header>
</body>

I am instantiating a Vue instance and tying it to the #main-header:

import CustomHeader from '../header.vue';

const header = new Vue({
    el: '#main-header',
    data: chx,
    components: {
        'custom-header': CustomHeader
    },
    methods: {
        run: function() {
            console.log('run');
        },
        print: function() {
            window.print()
        },
        save: function() {
            console.log('save');
        }
    }
});

And the imported template:

<template>
    <div class="header-menu">
        <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
        <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
        <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
</template>

No errors are logged in the console or by the Webpack process. Not sure where to go from here since nothing is being logged. The <header> div remains empty in the resulting HTML.

Upvotes: 1

Views: 325

Answers (1)

thanksd
thanksd

Reputation: 55644

Your custom header component has two div elements at the root of its template. A component can only have a single root element.

In your case, it's probably easiest to wrap the content in a div element:

<template>
  <div>
    <div class="header-menu">
      <img class="logo" src="images/logo.png">
    </div>
    <div class="header-menu">
      <h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
      <i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
    </div>
  </div>
</template>

Upvotes: 4

Related Questions