Register Global Components0:35
One, there are potential benefits to tree shaking when compiling down your code. Two, it can often help with your editor's static analysis of the current component. And then three, it's generally just a good practice when you're building Vue plugins to, without the user's knowledge, register a set of components globally through the entire app. So for that reason, you have to manually do it, or, if it makes sense, you can register it globally yourself. And here's how. In your app.js file, where we create our app and we use the Inertia plugin, as part of that, let's also register a component called Link, and I'll pull that in here.
In your app.js file, where we create our app and we use the Inertia plugin, as part of that, let's also register a component called Link, and I'll pull that in here. And I can do that automatically. So import your Link from Inertia Vue 3, and then we will register it as a global component. And if you want to do more, just call component again. So maybe you want to do a head component or something like that. Here is where you can take care of that. Okay, so now, with this small change, you no longer have to manually import it. You can get rid of this, like so, and everything is still going to work. If I come back to Firefox and give this a refresh, notice I still have my Link here,
Using Script Setup2:07
Now one more thing to consider. Let's bring this back, and then on users, I'll bring it back to what we had before. Another option, if you're using Vue 3 and Vue's composition API, is this new script setup style. This makes the process of using the composition API just a little more friendly. Think of it as sugar for manually exporting an object that declares a setup method. So for example, I could get rid of all of this, and simply by importing the components here, I then have access to them automatically. Now you'll see here my editor is squawking a little bit. This should work.
Defining Props in Setup2:38
Now you'll see here my editor is squawking a little bit. This should work. So my guess is phpStorm doesn't quite yet understand how to parse Vue's script setup. I bet they're working on that right now. But nonetheless, if I were to switch back to Firefox and refresh, I still see my link. But do notice I've lost the time, and that's because if I bring it back, we did accept time as a prop. So again, it's a slight change to how you build your components, but if you're using script setup, you could use this macro called defineProps, and this would be the same thing. And again, because this is all relatively new at the time of this recording, my editor
Choosing an Approach4:17
So you could take this approach, or you could take the approach where you manually register a global component, or you could combine the two. The choice is yours.
