diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index e39555bb9..90c00959d 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -33,6 +33,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
- `registeredComponentsOnly` ... If `true`, only registered components (in PascalCase) are checked. If `false`, check all.
default `true`
- `ignores` (`string[]`) ... The element names to ignore. Sets the element name to allow. For example, custom elements or Vue components with special name. You can set the regexp by writing it like `"/^name/"`.
+- `globals` (`string[]`) ... Globally registered component names to check. For example, `RouterView` and `RouterLink` are globally registered by `vue-router` and can't be detected as registered in a SFC file.
### `"PascalCase", { registeredComponentsOnly: true }` (default)
@@ -141,6 +142,22 @@ export default {
+### `"PascalCase", { globals: ["RouterView"] }`
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
## :books: Further Reading
- [Style guide - Component name casing in templates](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates)
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 772fa83ac..ef137f65c 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -40,6 +40,11 @@ module.exports = {
{
type: 'object',
properties: {
+ globals: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true
+ },
ignores: {
type: 'array',
items: { type: 'string' },
@@ -63,13 +68,15 @@ module.exports = {
: defaultCase
/** @type {RegExp[]} */
const ignores = (options.ignores || []).map(toRegExp)
+ /** @type {string[]} */
+ const globals = (options.globals || []).map(casing.pascalCase)
const registeredComponentsOnly = options.registeredComponentsOnly !== false
const tokens =
context.parserServices.getTemplateBodyTokenStore &&
context.parserServices.getTemplateBodyTokenStore()
/** @type { Set } */
- const registeredComponents = new Set()
+ const registeredComponents = new Set(globals)
if (utils.isScriptSetup(context)) {
// For
`,
errors: ['Component name "TheComponent" is not kebab-case.']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['PascalCase', { globals: ['RouterView'] }],
+ output: `
+
+
+
+ `,
+ errors: [
+ {
+ message: 'Component name "router-view" is not PascalCase.',
+ line: 3,
+ column: 11
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['kebab-case', { globals: ['RouterView'] }],
+ output: `
+
+
+
+ `,
+ errors: [
+ {
+ message: 'Component name "RouterView" is not kebab-case.',
+ line: 3,
+ column: 11
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['kebab-case', { globals: ['router-view'] }],
+ output: `
+
+
+
+ `,
+ errors: [
+ {
+ message: 'Component name "RouterView" is not kebab-case.',
+ line: 3,
+ column: 11
+ }
+ ]
}
]
})