Global components in Vue (nuxt)

You should use a plugin that registers the account.

// plugins/bl-components.js

import Vue from 'vue'
import BlMain from '~components/frame/main/Main.vue'
import BlRegion from '~components/frame/region/Region.vue'
import BlLayout from '~components/frame/layout/Layout.vue'
import BlGrid from '~components/frame/grid/Grid.vue'
import BlColumn from '~components/frame/column/Column.vue'
    
const components = { BlMain, BlRegion, ... }
   
Object.entries(components).forEach(([name, component]) => {
    Vue.component(name, component)
})

// nuxt.config.js

export default {
    plugins: ['~plugins/bl-components']
}

!!! Always name your components starting with Base, for example: BaseIcon.vue
1. First, you need to create a plugin in your plugin folder, I called mine global.js
2. Install lodash: npm install lodash
3. Inside global.js add this code:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  '~/components',
  false,
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

4. Inside your nuxt.config.js add plugins: ['@plugins/global.js']
5. Now you can use your base components only by typing <BaseIcon />