diff --git a/src/core/util/options.js b/src/core/util/options.js index 5f0d10d3361..9b1574b3103 100644 --- a/src/core/util/options.js +++ b/src/core/util/options.js @@ -4,6 +4,7 @@ import config from '../config' import { warn } from './debug' import { nativeWatch } from './env' import { set } from '../observer/index' +import { hyphenate } from '../../shared/util' import { ASSET_TYPES, @@ -260,7 +261,8 @@ export function validateComponentName (name: string) { 'and must start with a letter.' ) } - if (isBuiltInTag(name) || config.isReservedTag(name)) { + const hyphenatedName = hyphenate(name) + if (isBuiltInTag(hyphenatedName) || config.isReservedTag(hyphenatedName)) { warn( 'Do not use built-in or reserved HTML elements as component ' + 'id: ' + name diff --git a/test/unit/features/options/components.spec.js b/test/unit/features/options/components.spec.js index 1a94380c322..ae5465fc3c8 100644 --- a/test/unit/features/options/components.spec.js +++ b/test/unit/features/options/components.spec.js @@ -69,6 +69,15 @@ describe('Options components', () => { expect('Do not use built-in or reserved HTML elements as component').toHaveBeenWarned() }) + it('should warn component names translated into native HTML elements', () => { + new Vue({ + components: { + Div: { template: '
' } + } + }) + expect('Do not use built-in or reserved HTML elements as component').toHaveBeenWarned() + }) + it('should warn built-in elements', () => { new Vue({ components: {