Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Vue using wrong component when there're global and local components with same name but registered with different naming conventions
See original GitHub issueJSFiddle: http://jsfiddle.net/fenivana/3y7hzwg8/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<x-foo/>
</div>
<script>
Vue.component('x-foo', {
template: '<div>global foo component will be used</div>'
})
new Vue({
el: '#app',
components: {
XFoo: {
template: '<div>local foo component won\'t show</div>'
}
}
})
</script>
</body>
</html>
Issue Analytics
- State:
- Created 7 years ago
- Comments:14 (8 by maintainers)
Top Results From Across the Web
Component Registration - Vue.js
There are two ways to register components: global and local. Global Registration #. We can make components available globally in the current Vue...
Read more >Component name "Temp" should always be multi-word vue ...
js Technology. I am getting an error while running my Vue application. Don't know where I am wrong, please try to fix my...
Read more >Best Way to Register Common Components Globally in VueJS
In this step-by-step tutorial, find out the best way to register common components globally in VueJS. Also, visit the source code to clone ......
Read more >Vue - Component Registration - w3resource
whenever we are using a component directly in the DOM, it is strongly recommended that we follow the w3c rules for custom tag...
Read more >Composing with Components | Vue GWT - GitHub Pages
Note that Vue does not enforce the W3C Rules for custom tag names (all-lowercase, ... To register a global component, you can use...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@JounQin Here is what happend internally. https://github.com/vuejs/vue/blob/8c0fac699a48ec62b25a94b4083ea1d75c52c236/src/core/util/options.js#L322
with
[, it will check prototype chain, so firstx-foo, thenXFooSo I think it might bring breaking change in some cases if we apply the new resolving strategy.
I think this is a bug, camel case and title case component name seems aliases rather than fallback. Practically, we use camel/title case to register local component (with ES6 object shorthand) since JavaScript does not allow kebab case as variable names.
And also, local component should not be overridden by global components. It can easily cause unexpected behavior and break capsulations of third party components.