So I have a Vue 2 app here, and if you go into main.js, this is our entry point, and you can change this manually, but if you're using Vue CLI, you can make use of a plugin that does this for us. So we can say vue add vue-next, and this will do all the upgrading for initializing Vue for us. Okay, so that's done. Now if you look at the diff here, you'll see what changed. So first thing is the eslint. So it's now making use of eslint rules for Vue 3, package.json. We now have Vue 3 installed, and it's still using a slightly older version of Vue 3, but

So it's now making use of eslint rules for Vue 3, package.json. We now have Vue 3 installed, and it's still using a slightly older version of Vue 3, but you can manually upgrade this if you want. At the time of this recording, the latest version is the release candidate 4. And if you look at the main.js, now it's making use of this createApp and mounting to the div with the id of app. And this is a fairly simple Vue app, so that is all the upgrade required to make this work. So if I run npm run serve, and if I look at this in the browser, it should still work. And it does. Cool.

And it does. Cool. So also note that any global helpers are now gone and replaced with these instance methods. So it's basically the same thing, but we're now running the method on the app instance. So you can see a table here that you can refer to. So next thing is global API tree shaking, which allows for a smaller bundle size. And this basically says that some of the methods you have to import. So things like vue.nextTick or vue.observable, you have to import. The next thing is pretty minor and has to do with the data option. And it's saying that in Vue 2, you can actually define data as just an object on the app instance.

And if you read here, it says on, off and once are now removed. So if you ever used an event bus or an event hub, then you can no longer use this in Vue 3. So those required the on method to work correctly. And I personally still use the event bus pretty often, specifically when I had to communicate between sibling components, and I didn't want to pass information back to the parent and then pass that off back to the other child. So I have an example here for that. So back to the Vue 2 app here. So if we look at app.vue, which is the parent component, I have a bunch of sibling components.

So back to the Vue 2 app here. So if we look at app.vue, which is the parent component, I have a bunch of sibling components here that are siblings to the toDoList. So let's start with SiblingNoProp. So let's open that up. And this makes use of an event bus. So what I am doing here is just listing a piece of state that lives in its sibling component. So let's look at the toDoApp. So I have this id for toDo piece of state. And this just keeps track of the current id, just so each toDo can be unique, or each.

So I have this ID for toDo piece of state. And this just keeps track of the current ID, just so each toDo can be unique, or each ID can be unique. So this lives in the ToDoList component. But if you look at our structure here, like I said earlier, these are sibling components. And I want to output that ID for toDo in this sibling component. So what I'm doing here is emitting that event. So I have a watcher on the ID for toDo. So I'm emitting the event, and it's called IDChanged, and I'm passing in the new value. And for sibling no prop on created.

So I'm emitting the event, and it's called IDChanged, and I'm passing in the new value. And for sibling no prop on created. I have this eventBus and it's listening for that IDChanged, and it's updating that piece of state whenever it gets that event. And as you see, I'm using this on method here, which no longer exists in Vue 3. And if you want to see the eventBus, it's just right here. So window.eventBus is a new instance of Vue. So just to show you this work, just pay attention to this one for now, I add this, you'll see that it gets updated. So like I said, this no longer works in Vue 3, because we are making use of the on.

that it gets updated. So like I said, this no longer works in view three, because we are making use of the on method here. So if you want to communicate between sibling components in view three, you can still do that. But in this case, we're going to have to pass it to the parent and then the parent has to pass it into the child as a prop. So I hope that makes sense. So again, we're emitting it here. So this time, we're just using the standard view instance here, and emitting it to the

So again, we're emitting it here. So this time, we're just using the standard view instance here, and emitting it to the parent. It's called the same thing. So now the parent ToDoList listens for this change, and it calls this updateProp method. And all this does is update this piece of state, and it passes it to the sibling component. So this sibling component just gets its prop updated, and that updates as well. So you saw that happen here for the sibling component, and that works the same way. But now we're just passing props around. So if you look at the documentation, you'll see that the migration strategy is to make

But now we're just passing props around. So if you look at the documentation, you'll see that the migration strategy is to make use of an external library. And they have one here called MIT. And I'm actually using this in the code. So if you open this up, it's basically the same thing as the view instance. And the API is pretty much the same thing. So I have another component here, you saw sibling MIT. And if you look at the toList, actually, it's going to main first. So you instantiate it just like this, you see it being imported here.

So to convert your filters, just make a computed property or a method. And that should be able to do the same thing. So you see the example here. This one is using filters, and this one is just using a computed property. So I'm feeling someone's going to make a filter library that allows you to use filters just like you did in view two. So the next thing to take note of is inline templating is being removed. So if you ever use inline templates before you have to convert that over. So I have an example here. So I have a global component called SomeComponent.

So I have an example here. So I have a global component called SomeComponent. And as you see, it's using an inline template here. So it's using this as the template. And you see that being rendered here on the first line. Now the obvious fix to this is to move your inline template to an actual template. So we can grab this, remove the inline template. And move that to a template section in your component. So right here, template, to use template strings here, paste that in, and this should still work.

So right here, template, to use template strings here, paste that in, and this should still work. And it's not forget the comma. And there's also another way to migrate and that's using the script tag, and just specify a selector. So I have that to an example, I have a MyComponent here. And I also have this script section here. And as you can see, MyComponent refers to the my component template. And this still works. There we go.

And this still works. There we go. So I personally never used inline templates, but I know there might be some people who still do. So the last change I want to take note of is the changes in v-model. So if you want to use v-model on a custom child component and keep the state in sync between the child and the parent, in View2, you can use a dot sync property on the binding to do this. In View3, v-model now takes a parameter if you want to do this. It also supports multiple v-models, which I showed you in a previous video.