components w/ Array definition

[mcdmaster]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

In @nuxt/components, although I am appreciating that we can configure components, listing file path entries using Array like below, I always face a set of errors (described later) when compiling a nuxt app:

components: [
  {
    path: './components/',
    extensions: ['vue'],
  },
  'AppLink',
  'SideMenu',
  'DetailCard',
],

Describe the solution you'd like
A clear and concise description of what you want to happen.

The errors like below were eliminated:

 ERROR  [Vue warn]: Invalid value for option "components": expected an Object, but got Array.                 18:19:20  
 ERROR  [Vue warn]: Invalid component name: "0". Component names should conform to valid custom element name in html5 specification.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Tuning eslint configuration or something else which may soup up my development activities

Additional context
Add any other context or screenshots about the feature request here.

Apologies if similar issue can be found as previously resolved, but I wanted to see its reference, Thank you in advance

[NozomuIkuta]

@mcdmaster

It seems that Vue warns you rather than Nuxt or Nuxt Components.

You set up components options as expected by Nuxt Components' type definition:

components/src/types.ts

Lines 37 to 46 in 74b343d

	export interface Options {
	dirs: (string | ComponentsDir)[]
	loader: Boolean
	}
	declare module '@nuxt/types/config/index' {
	interface NuxtOptions {
	components: boolean | Options | Options['dirs']
	}
	}

import { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  components: [
    {
      path: './components/',
      extensions: ['vue'],
    },
    'AppLink',
    'SideMenu',
    'DetailCard',
],

Actually, since you are using nuxt.config.ts, if you violates type definition, Nuxt even can't build the app because TypeScript compilation fails.

---

Since there is no steps to reproduce provided, I can't be 100% sure, but I guess the error message you see is about the components of Vue's constructor options. You might want to check if it's set up as an array somewhere.

// Some.vue
export default {
  components: [
    { /* Definition */ } // => Key is 0 and Vue will use it as the name of the component
  ]
}

[NozomuIkuta]

@mcdmaster

If your issue is resolved, it would be appreciated if you close it.
Unfortunately, I can't close issues in this repository, but only author of the issue and the Nuxt team can.

[mcdmaster]

@NozomuIkuta

Thank you for heads-up. Yes, I think we can close this issue for now.
Indeed, I am trying to implement "bracketed" components definition like below.
My understanding is that this may be one of applicable cases.

const config: NuxtConfig = {
  components: [
    {
      path: './components/',
      extensions: ['vue'],
    },
    {
      path: './node_modules/vue-spinner/src/',
      pattern: 'ScaleLoader.vue',
    },
],