diff --git a/packages/nuxt/src/components/scan.ts b/packages/nuxt/src/components/scan.ts index 4c755eec9d..ede5f47956 100644 --- a/packages/nuxt/src/components/scan.ts +++ b/packages/nuxt/src/components/scan.ts @@ -130,13 +130,14 @@ export function resolveComponentName (fileName: string, prefixParts: string[]) { * @example AwesomeComponent -> ['Awesome', 'Component'] */ const fileNameParts = splitByCase(fileName) - const fileNamePartsContent = fileNameParts.join('').toLowerCase() + const fileNamePartsContent = fileNameParts.join('/').toLowerCase() const componentNameParts: string[] = [...prefixParts] let index = prefixParts.length - 1 - const matchedSuffix:string[] = [] + const matchedSuffix: string[] = [] while (index >= 0) { - matchedSuffix.unshift((prefixParts[index] || '').toLowerCase()) - if (fileNamePartsContent.startsWith(matchedSuffix.join('')) || + matchedSuffix.unshift(...splitByCase(prefixParts[index] || '').map(p => p.toLowerCase())) + const matchedSuffixContent = matchedSuffix.join('/') + if ((fileNamePartsContent === matchedSuffixContent || fileNamePartsContent.startsWith(matchedSuffixContent + '/')) || // e.g Item/Item/Item.vue -> Item (prefixParts[index].toLowerCase() === fileNamePartsContent && prefixParts[index + 1] && diff --git a/packages/nuxt/test/scan-components.test.ts b/packages/nuxt/test/scan-components.test.ts index 0c4025f2a0..52cd8bb14b 100644 --- a/packages/nuxt/test/scan-components.test.ts +++ b/packages/nuxt/test/scan-components.test.ts @@ -257,7 +257,10 @@ const tests: Array<[string, string[], string]> = [ ['ThingItemTest', ['Item', 'Thing', 'Foo'], 'ItemThingFooThingItemTest'], ['ItemIn', ['Item', 'Holder', 'Item', 'In'], 'ItemHolderItemIn'], ['Item', ['Item', 'Holder', 'Test'], 'ItemHolderTestItem'], - ['ItemHolderItem', ['Item', 'Holder', 'Item', 'Holder'], 'ItemHolderItemHolderItem'] + ['ItemHolderItem', ['Item', 'Holder', 'Item', 'Holder'], 'ItemHolderItemHolderItem'], + ['Icones', ['Icon'], 'IconIcones'], + ['Icon', ['Icones'], 'IconesIcon'], + ['IconHolder', ['IconHolder'], 'IconHolder'] ] describe('components:resolveComponentName', () => {