js. You can register a component globally or vocally. So far, we've only registered components locally. That is, we import them in the other component where they're needed and then just go to town using it within that component.
view without importing it first, then we would get an error like you saw in the last lesson. So locally registered components can only be used within the components that they're imported in and not elsewhere. However, we could also register components globally. ts file of your project.
vue files. component. Pass it the name of the component. So this is the tag that you would use to use it inside of the template.
And then the actual component instance, which is what you imported above. Great. So now if I were to remove the Coffee Plan component from being imported here in PlanPicker, and go and refresh my page, you'll notice that everything is still working. So Coffee Plan is still available now inside of PlanPicker, even though we haven't imported it locally.
That's because we've made it available globally. However, global registration often isn't ideal. For example, Globally, registering all of your components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript that your users have to download.
Additionally, for some components, it really doesn't make sense to have to register them globally. Why? Because the coffee plan component is only ever used inside of the plan picker, not outside of it. So, therefore, it makes more sense to just import it locally and not have it registered globally.
js. You can register a component globally or vocally. So far, we've only registered components locally. That is, we import them in the other component where they're needed and then just go to town using it within that component.
view without importing it first, then we would get an error like you saw in the last lesson. So locally registered components can only be used within the components that they're imported in and not elsewhere. However, we could also register components globally. ts file of your project.
vue files. component. Pass it the name of the component. So this is the tag that you would use to use it inside of the template.
And then the actual component instance, which is what you imported above. Great. So now if I were to remove the Coffee Plan component from being imported here in PlanPicker, and go and refresh my page, you'll notice that everything is still working. So Coffee Plan is still available now inside of PlanPicker, even though we haven't imported it locally.
That's because we've made it available globally. However, global registration often isn't ideal. For example, Globally, registering all of your components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript that your users have to download.
Additionally, for some components, it really doesn't make sense to have to register them globally. Why? Because the coffee plan component is only ever used inside of the plan picker, not outside of it. So, therefore, it makes more sense to just import it locally and not have it registered globally.