New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Define global components #421
Comments
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'] |
@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. |
@alexchopin any idea? |
+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.
Then following the advice of including in plugins on nuxt.config..
I would like this to register this icon component to all layouts, pages, and components. |
@irthos and @warrebuysse you ever figure this out? |
@acidjazz while importing the component in the plugin file look at the path and use it relative, not shortened "~" |
Confirming @acidjazz - just solved all of my issues because of @snsxn 's comment! My working example: global.js
nuxt.config.js
|
@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! |
This is how I load all components which are placed directly under global-component-loader.js:
Nuxt config:
|
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. |
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 likeimport "components/frame/Frame.vue"
that contains the imports for regions, layouts, grids & columns.The text was updated successfully, but these errors were encountered: