[Vuejs]-Confused about .vue extensions – "Unknown custom element: <topmenu>"

by

2👍

✅

It’s not working because you’re not exporting anything in your vue file.

Try this in your TopMenu.vue file:

<template>
  <p>
    TOPMENU
  </p>
</template>

<script>
    export default {
    }
</script>

Also change the html <topmenu></topmenu> to <top-menu></top-menu>

For your second question, HTML is case insensitive so your title case components wouldn’t match with html tags. So Vue translates your title case components to a ‘dash-case’.
From the documentation itself there’s the explanation why:

Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.

You can read more from the the docs

👤flipjms

Leave a comment