Okay, let's take a look at some of the global API changes that are happening in Vue 3. For most people, it's not going to affect the way you use Vue, but I think it's good to know about. So I have two apps here, a Vue 2 app and a Vue 3 app. So in the Vue 2 app, there are a bunch of global functions that you've probably used before. So things like Vue.use, Vue.mixin, component, or directive. Now these are global functions, and a few problems can arise with this. So one is when you're testing, you usually want to restore global config after each test. So similar to how you would set up an environment in Laravel, and then after each test, you

So one is when you're testing, you usually want to restore global config after each test. So similar to how you would set up an environment in Laravel, and then after each test, you want to revert those changes. So some methods like Vue.use or Vue.mixin don't allow you to revert their effects. So it makes testing quite difficult. So if you've used Vue Test Utils before, you can get around this by using a createLocalVue method. So another problem is you can't really share the same copy of any of these global methods with different instances of Vue. So as an example, I have this global mixin here.

with different instances of Vue. So as an example, I have this global mixin here. And if I wanted to share this with only one instance of Vue, say this one, then we couldn't do this because this mixin is truly global, and it will be available on both of these instances. So in Vue 2, there is no real concept of instances. In Vue 3, we can actually create different instances of Vue. So if you look at the boilerplate here, we can just make a change here and say const app = createApp(). And then I'm going to remove this mount.

app equals create app. And then I'm going to remove this mount. And now instead of calling the global methods like we did in Vue 2, we can call them on this specific instance. And then we can mount it at the end here. So app.mount. So for this example that I have in Vue 2, if I want mixins available for just one instance, we can do that. So now instead of Vue.mixin, we can just call this method on the actual instance. So app.mixin.

So now instead of Vue.mixin, we can just call this method on the actual instance. So app.mixin. And if I wanted to create another instance, we can do that. We just have to change this to another instance. So I'm just copy this, paste it here. And we can just rename these to app2, app2, and app2.mount. And this should work if I were to make another div with an ID of app2. So you can see all the mappings of global methods in Vue 2 to instance methods in Vue 3. So if you look at the RFC here, you'll see the mapping right here.

in a previous video. And this shows you how your template gets compiled. So if I were to use, like I said, a transition component, you'll see that it will be imported only when it's used. So if I use it now, say transition, you'll see the transition component being imported here. And we just close that out. And same goes for other features, say for example, fragments. So if I were to have multiple root nodes or fragments, so right now I don't because I have one root node, but if I do have multiple root nodes, then you'll see fragment has been