Because you're using the in-browser templates, self-closing tags are not working as expected, so it's not that anything containing map isn't working, it's that things are not passed to Vue as you expect.

About the map element, it should indeed warn it is an existing element (same warning as button), so I'm changing the title of the issue to reflect that

Ah, I forgot that map is a valid HTML element. But, even if I don't use self-closing tags, a component named MapView doesn't work :/
https://jsfiddle.net/e2yxoomh/11/

it does work, you need to use map-view beacuse in browser you cannot use uppercase for element names

Hmm ok. Well, it seems uppercase works for the first character.

• Foobar => Works
• FooBar => Doesn't work

You should checkout the style guide section of the docs, it will help you with that 🙂

Ok, thanks. In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

edited by @posva: collapsed the table as it took too much space

Warnings only work when components are registered globally e.g.

Vue.component('map', () => import('@js/components/Map'))

When imported and registered locally in components, no warnings are triggered. e.g.

<script>
import Map from '@js/components/Map';
export default {
    components: {Map}
}
</script>
<template>
    <div><map/></div>
<template>

In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

@pqvst If you use in-DOM template, Vue cannot warn you about the use of something like MapView. They are parsed by the browser first and what Vue got is just an element with the tagname mapview:

I'm thinking of working on this. Will upload a PR in a while!

I was able to find the error but not where it was coming from because vue has a warn() function and the errors always link to that instead of where the error is coming from.

Ok, so it's not working because of the browser by default setting the tag names to lowercase but vue is still looking for the elements with the upper case letters resulting in it not working

and here is proof: https://jsfiddle.net/e2yxoomh/50/

you just need to replace
Vue.component("MapView"
with
Vue.component("Mapview"
everything else can stay the same

Hi guys, is there anything needed for this Issue? It has bee open for over a year.

I can work on it if you want too.

Seems intresting. Think to work on it

is there anything needed for this issuse?

Hmm ok. Well, it seems uppercase works for the first character.

• Foobar => Works
• FooBar => Doesn't work

Yeah the first Letter should be uppercase