Nuxt.js: Define global components

[warrebuysse]

In every component or page we create we end up having tons of import "components/component/SomeComponent.vue" states for basic elements like regions, layouts, grids & columns. Is there a way in nuxt to define those components globally so they are known in subcomponents? Something like import "components/frame/Frame.vue" that contains the imports for regions, layouts, grids & columns.

_{This question is available on Nuxt.js community (#c363)}

[alexchopin]

You can do it by creating a plugin file and register your components globally.

plugins/global.js

import Vue from 'vue'
import Grids from '../components/Grids.vue'

Vue.component('grids', Grids)

nuxt.config.js

plugins: ['~/plugins/global.js']

[warrebuysse]

@alexchopin Then what should be in the Frame component? The import states for the other components?

Like this?

<script>

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'

export default {
  components: {
    BlMain,
    BlRegion,
    BlLayout,
    BlGrid,
    BlColumn
  },
}
</script>

Do I need to import the Frame.vue component in the components as well?

import Frame from '~components/frame/Frame.vue'

PS: We are using adonuxt as a starter pack.

[warrebuysse]

@alexchopin any idea?

[34r7h]

+1, seems like there should be a trivial mechanism to make utility components created in NUXT available globally.

For example, I'm including material design icons and making a utility component.

<template>
    <i class="material-icons">{{i}}</i>
</template>
<script>
  export default {
    props: ['i']
  }
</script>

Then following the advice of including in plugins on nuxt.config..

plugins: [
    { src: './components/util/Icon.vue' }
  ]

I would like this to register this icon component to all layouts, pages, and components.

[acidjazz]

@irthos and @warrebuysse you ever figure this out?

[snsxn]

@acidjazz while importing the component in the plugin file look at the path and use it relative, not shortened "~"
Then you can use the component everywhere

[gkarmas]

Confirming @acidjazz - just solved all of my issues because of @snsxn 's comment!

My working example:

global.js

import Vue from "vue";
import Badge from "~/components/Badge.vue";
import BaseAlert from "~/components/BaseAlert.vue";
import BaseButton from "~/components/BaseButton.vue";
import BaseCheckbox from "~/components/BaseCheckbox.vue";
import BaseInput from "~/components/BaseInput.vue";
import BasePagination from "~/components/BasePagination.vue";
import BaseProgress from "~/components/BaseProgress.vue";
import BaseRadio from "~/components/BaseRadio.vue";
import BaseSlider from "~/components/BaseSlider.vue";
import BaseSwitch from "~/components/BaseSwitch.vue";
import Card from "~/components/Card.vue";
import Icon from "~/components/Icon.vue";

Vue.component("badge", Badge);
Vue.component("baseAlert", BaseAlert);
Vue.component("baseButton", BaseButton);
Vue.component("baseCheckbox", BaseCheckbox);
Vue.component("baseInput", BaseInput);
Vue.component("basePagination", BasePagination);
Vue.component("baseProgress", BaseProgress);
Vue.component("baseRadio", BaseRadio);
Vue.component("baseSlider", BaseSlider);
Vue.component("baseSwitch", BaseSwitch);
Vue.component("card", Card);
Vue.component("icon", Icon);

nuxt.config.js

 plugins: [
    { src: "~/plugins/global.js" }
  ]

[acidjazz]

@gkarmas @snsxn @warrebuysse awesome!

i actually started working on a nuxt module to help register and use programmatic global components

here is an example repo setup using it as a plugin

https://github.com/acidjazz/nuxt-global-component

let me know your 2c on how i'm doing this if you don't mind!

[evry-johber]

This is how I load all components which are placed directly under /components:

global-component-loader.js:

import Vue from 'vue'
import _ from 'lodash'

const components = require.context('@/components', false, /[A-Z]\w+\.(vue)$/) 
_.forEach(components.keys(), fileName => {
    const componentConfig = components(fileName)
    const componentName = fileName.split('/').pop().split('.')[0]
    Vue.component(componentName, componentConfig.default || componentConfig)
})

Nuxt config:

plugins: ['~/plugins/global-component-loader.js']

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.