Hello, my friends.
Let's start right away.
I'm Mario, and I want to take a first look
at Vue 3 with you.
So, let's create a new Vue.js project.
Well, before we create a new project, take
care of the installed versions from your preferred
package manager and vue/cli service and update
it.
I use here actually the vue/cli service in
version 4.5.
That's necessary.
Okay, let's create a new project with vue
create and then the project name, "vue3-first-look",
for example.
And here the first new thing we can see.
We have the opportunity to choose a new predefined
project with Vue 3 onboard.
Let's do this.
That takes a few seconds.
Okay, looks good.
Let's switch to our new project folder and
start it.
Now, the boilerplate project looks quite similar
to the previous version.
We have here our public folder with the index.html
file.
Which looks and works quite similar to the
current version.
This place with the id app will be overwritten
with the result of our application.
Well, we have also here our source folder.
Of course, you are also in Vue 3, entirely
free on how you can create your folder structure.
That's great.
So let's take a look at the main.js file.
And here, we can see the first significant
change - the way we are instantiating and
configuring our application.
Now the difference is, we don't import and
use the regular Vue object.
Instead, we import and use the createApp function
for creating the app instance.
But why?
What's the reason or the intention behind
it?
We are currently using a global Vue object
to provide any configuration and create then
a new Vue instance.
Any change made to the Vue object will affect
every Vue instance and component.
And with this solution here, we can create
first our instance.
But new is that you can use this scope for
your app configuration,
like setting up global components,
directives,
or by using third
party libraries, for example.
With the old variant, it was the opposite.
We had to set up the configuration first and
then create the instance.
The disadvantage was that we couldn't use
different configurations for multiple instances.
But now that's possible.
It looks and works much cleaner, in my opinion,
so a fantastic improvement.
The rest is entirely the same.
But if you love the concept of Event Bus in
Vue.js, then this might disappoint you a bit.
The Event Bus is deprecated.
Also, Vue Filters are deprecated.
But there are also many new features we are
getting with the new major release, for example,
the Composition API, Fragments, Portals, or
the usage of multiple v-model directives.
I'm happy to show you some of these new things
in one of my next videos.
Thank you so much for watching.
I'll see you in the next video.
