Components not being automatically detected in v2

[Jazcash]

I have components that live in the pages directory like pages/stuff/components/Thing.vue. This is in my nuxt config:

components: [
    "~/components",
    { path: "~/pages", pattern: "*/components/**" }
]

Just upgraded to v2, and now nuxt can't find any of my components in those directories (Unknown custom element).

I've read the changelogs and seen the notes about prefix and global components but I don't understand. The typings don't tell me prefix is required and the pattern property hasn't been removed, so what am I missing now?

nuxt 2.15.6

[atinux]

Could you take a look at the .nuxt/components/index.md to see the generated components?

[Jazcash]

Could you take a look at the .nuxt/components/index.md to see the generated components?

Ah ha!

I don't see an index.md but I have index.js:

import { wrapFunctional } from './utils'

export { default as LoadingBar } from '../..\\components\\LoadingBar.vue'
export { default as Navigation } from '../..\\components\\Navigation.vue'
export { default as Option } from '../..\\components\\Option.vue'
export { default as Options } from '../..\\components\\Options.vue'
export { default as BalanceChangesComponentsPropertyChange } from '../..\\pages\\balance-changes\\components\\PropertyChange.vue'
export { default as BattlesComponentsBattle } from '../..\\pages\\battles\\components\\Battle.vue'
export { default as ReplaysComponentsChatLog } from '../..\\pages\\replays\\components\\ChatLog.vue'
export { default as ReplaysComponentsDateFilter } from '../..\\pages\\replays\\components\\DateFilter.vue'
export { default as ReplaysComponentsMap } from '../..\\pages\\replays\\components\\Map.vue'
export { default as ReplaysComponentsMapFilter } from '../..\\pages\\replays\\components\\MapFilter.vue'
export { default as ReplaysComponentsPlayerFilter } from '../..\\pages\\replays\\components\\PlayerFilter.vue'
export { default as ReplaysComponentsReplayPreview } from '../..\\pages\\replays\\components\\ReplayPreview.vue'

export const LazyLoadingBar = import('../..\\components\\LoadingBar.vue' /* webpackChunkName: "components/loading-bar" */).then(c => wrapFunctional(c.default || c))
export const LazyNavigation = import('../..\\components\\Navigation.vue' /* webpackChunkName: "components/navigation" */).then(c => wrapFunctional(c.default || c))
export const LazyOption = import('../..\\components\\Option.vue' /* webpackChunkName: "components/option" */).then(c => wrapFunctional(c.default || c))
export const LazyOptions = import('../..\\components\\Options.vue' /* webpackChunkName: "components/options" */).then(c => wrapFunctional(c.default || c))
export const LazyBalanceChangesComponentsPropertyChange = import('../..\\pages\\balance-changes\\components\\PropertyChange.vue' /* webpackChunkName: "components/balance-changes-components-property-change" */).then(c => wrapFunctional(c.default || c))
export const LazyBattlesComponentsBattle = import('../..\\pages\\battles\\components\\Battle.vue' /* webpackChunkName: "components/battles-components-battle" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsChatLog = import('../..\\pages\\replays\\components\\ChatLog.vue' /* webpackChunkName: "components/replays-components-chat-log" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsDateFilter = import('../..\\pages\\replays\\components\\DateFilter.vue' /* webpackChunkName: "components/replays-components-date-filter" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsMap = import('../..\\pages\\replays\\components\\Map.vue' /* webpackChunkName: "components/replays-components-map" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsMapFilter = import('../..\\pages\\replays\\components\\MapFilter.vue' /* webpackChunkName: "components/replays-components-map-filter" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsPlayerFilter = import('../..\\pages\\replays\\components\\PlayerFilter.vue' /* webpackChunkName: "components/replays-components-player-filter" */).then(c => wrapFunctional(c.default || c))
export const LazyReplaysComponentsReplayPreview = import('../..\\pages\\replays\\components\\ReplayPreview.vue' /* webpackChunkName: "components/replays-components-replay-preview" */).then(c => wrapFunctional(c.default || c))

I can see it's prefixing the page names now to the component name, so renaming all my component usages like ReplaysComponentsReplayPreview instead of ReplayPreview is working. Bit of a pain but has fixed it, tyvm!

[Jazcash]

Found I can pass pathPrefix: false to fix this