CODEWITHSUNDEEP
javascriptecmascript-6vuejs2nuxt.js
Warre Buysse
Warre Buysse

Reputation: 1345

Global components in Vue (nuxt)

While building a Vue application we re-use certain Vue components in every template. Our grid system exists out of .region, .layout, .grid, .column elements. All of them are separate Vue components (, ...).

We now end up doing this in every template: 

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'

Is there a way to import Vue Components globally in your project? Is it an option to create a component Frame.vue that contains the imports above and add the Frame component in every template? How do other FE frameworks tackle this?

We are using Nuxt JS upon Vue.

Upvotes: 24

Views: 38078

Answers (5)

Pushkar Raj
Pushkar Raj

Reputation: 283

You can do this by creating custom plugin something like this..

import Vue from 'vue'

/** form */
import Email from '~/components/elements/form/Email'
import Mobile from '~/components/elements/form/Mobile.vue'
import Password from '~/components/elements/form/Password'
import TextInput from '~/components/elements/form/TextInput.vue'
import FormLayout from '~/components/elements/form/FormLayout.vue'
import SelectInput from '~/components/elements/form/SelectInput.vue'
import ConfirmPassword from '~/components/elements/form/ConfirmPassword'

/** snackbar */
import Snackbar from '~/components/elements/Snackbar.vue'

/** skeleton */
import PageListing from '~/components/skeleton/PageListing'

/** slots */
import OneRow from '~/components/slots/layouts/OneRow'
import LoginWrapper from '~/components/slots/layouts/LoginWrapper'

/** slots tab */
import TabHolder from '~/components/slots/layouts/TabHolder'
import TabHolderHeading from '~/components/slots/layouts/TabHolderHeading.vue'

/** gallery */
import GalleryInput from '~/components/gallery/GalleryInput.vue'
import GalleryDialog from '~/components/gallery/GalleryDialog.vue'

const components = { TabHolderHeading, TabHolder, GalleryInput, GalleryDialog, Snackbar, LoginWrapper, PageListing, OneRow, Password, FormLayout, ConfirmPassword, Email, Mobile, TextInput, SelectInput }

Object.entries(components).forEach(([name, component]) => {
  Vue.component(name, component)
})

Now make it available globally by calling it in nuxt.config.js

plugins: [
    { src: '~/plugins/import-design-elements' }
],

Upvotes: 4

motia
motia

Reputation: 1999

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']
}

Upvotes: 60

Raza
Raza

Reputation: 3383

In your nuxt.config.js, set components to true.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-components

Upvotes: 3

Tircomnicu
Tircomnicu

Reputation: 79

!!! 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)
})
  1. Inside your nuxt.config.js add plugins: ['@plugins/global.js']
  2. Now you can use your base components only by typing <BaseIcon />

Upvotes: 7

Aymen Jemli
Aymen Jemli

Reputation: 21

Make a frame.vue under the folder layout , import all your components in it and make it the layout for all your templates, like /template.vue

Upvotes: 1

Related Questions