I have the following 2 ponents

BrewTitle.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
  created() {
    console.log("title created")
  }
};
</script>

Snackbar.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
    created() {
        console.log("snackbar created")
    }
};
</script>

How they are added to the index.js file

import Vue from "vue";

import BrewTitle from "./ponents/BrewTitle";
import Snackbar from "./ponents/Snackbar";

Vueponent("brewtitle", BrewTitle);
Vueponent("snackbar", Snackbar);

const app = new Vue({
  el: "#app"
});

In my html template I have the following snippet

<div id="app">
<brewtitle />
<snackbar />
</div>
<script src="main.js"></script>

The ponents are almost identical, but the snackbar is nowhere to be found on the html page or in the view browser extension. There are no problems with webpack and there is no message in the browser.

What am I doing wrong?

I have the following 2 ponents

BrewTitle.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
  created() {
    console.log("title created")
  }
};
</script>

Snackbar.vue

<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: "Brew Title"
    };
  },
    created() {
        console.log("snackbar created")
    }
};
</script>

How they are added to the index.js file

import Vue from "vue";

import BrewTitle from "./ponents/BrewTitle";
import Snackbar from "./ponents/Snackbar";

Vue.ponent("brewtitle", BrewTitle);
Vue.ponent("snackbar", Snackbar);

const app = new Vue({
  el: "#app"
});

In my html template I have the following snippet

<div id="app">
<brewtitle />
<snackbar />
</div>
<script src="main.js"></script>

The ponents are almost identical, but the snackbar is nowhere to be found on the html page or in the view browser extension. There are no problems with webpack and there is no message in the browser.

What am I doing wrong?

• javascript
• vue.js

Share Improve this question Follow asked Jul 8, 2019 at 19:29 kristian nissenkristian nissen 2,91755 gold badges4646 silver badges7171 bronze badges 2

• Do you see either of the "... created" console messages? – Phil Commented Jul 8, 2019 at 23:39
• There is no message in the console – kristian nissen Commented Jul 9, 2019 at 7:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Browsers don't support self-closing tags like these:

<brewtitle />
<snackbar />

Try having explicit closing tags instead:

<brewtitle></brewtitle>
<snackbar></snackbar>

If you use a self-closing tag for a ponent then the browser will just treat it as an opening tag. An implicit closing tag will be created when the parent element closes. That'll work fine if there are no other siblings but it will go wrong when there are.

So taking your original code as an example:

<div id="app">
  <brewtitle />
  <snackbar />
</div>

The <brewtitle> won't count as closed until it reaches the closing </div>. So this is equivalent to:

<div id="app">
  <brewtitle>
    <snackbar></snackbar>
  </brewtitle>
</div>

So <snackbar> will be treated as a child of <brewtitle>. As brewtitle doesn't have a slot the snackbar will just be discarded.

This only applies if the HTML is being parsed directly by the browser. For anything parsed by Vue itself, such as in your .vue files, this won't be a problem.

From the official Vue documentation, https://v2.vuejs/v2/style-guide/#Self-closing-ponents-strongly-remended

Components with no content should be self-closing in single-file ponents, string templates, and JSX - but never in DOM templates.

...

Unfortunately, HTML doesn’t allow custom elements to be self-closing - only official “void” elements.