1

I have some base components that I use them in most of the page of my project. So I don't want to import them in each page and prefer to define them global. Related to nuxtjs source if I add components:true to nuxt.config.js my goal will achieved; but it doesn't work for me. And Version in use of nuxtjs is 2.15.2.

By the way, I'll be appreciated of any solution or idea.

negin motalebi
  • 351
  • 2
  • 15
  • use components:true in nuxt config and update your nuxt version to 2.15.2 in package.json like "nuxt": "^2.15.2" then problem will resolve – Mahamudul Hasan Mar 03 '21 at 11:18
  • @MdMahamudulHasan The problem was about the version but "2.15.2" has the same problem. In fact after "2.15.0" this bug occurred. I test "2.14.12" and it's ok. – negin motalebi Mar 03 '21 at 12:21

2 Answers2

2

You can register the component globally, so it won't be needed to import it in each page. In Nuxt, best way to do that is to create a plugin file.

Create for example the file myPlugin.js in your plugins folder, and use the following:

import Vue from 'vue';
import myComponent from '../components/MyComponent.vue';
Vue.use(myComponent);

Finally, in your nuxt.config.js, add your plugin:

plugins: [
  '~plugins/myPlugin'
]

This is the second example presented in the Nuxt plugin doc.

FitzFish
  • 8,557
  • 2
  • 30
  • 39
  • Thank you so much for your solution and it will be working. but I want to use something general in `nuxt.config`. I figure out the problem is bug of new version of nuxt js. by the way thank you for your response. – negin motalebi Mar 03 '21 at 11:37
  • Why do you want to do this directly in nuxt.config? – FitzFish Mar 03 '21 at 11:39
  • 1
    In my case I just have some components that they are in use in 90% of the page. so if I use `components` property I can achieve my purpose without any plugin. – negin motalebi Mar 03 '21 at 11:43
  • 1
    You will probably not benefit from any lazy-loading/performance with this method comparing to the official way. – kissu Mar 03 '21 at 13:53
1

This is not a bug and is totally working as expected, just a change that happened recently. More details can be found on my answer down here: https://stackoverflow.com/a/66336654/8816585

// nuxt.config.js
export default {
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/test too
      pathPrefix: false,
    },
  ]
}

I'd recommend this solution, since it's the official way of doing.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • I appreciate you. Unfortunately Nuxtjs documentation of [nuxtjs doc](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-components) has not been updated since new version released. By the way it worked! Thank you. – negin motalebi Mar 03 '21 at 14:12
  • There is a comment under my answer that links to a pull request. Not sure if the merge was deployed yet. But yeah, it takes time to update the docs. If you have some spare time, please help the open source project and submit a PR with the changes, they will be pleased to update it ASAP ! – kissu Mar 03 '21 at 14:14