Vue 3 - What's New? What Changed?

hi view js version 3 was released and in this video i will walk you through all the important changes that brings to us i will show you how to migrate your view 2 code to vuefree and i will talk about the biggest new feature view version 3 introduces even though that feature will be 100 optional now i want to start with one important note view version 3 is the latest version of a view but there is a but if you visit the official github repository of view version 3 which at the moment is the view next repository not view the view next repository you'll find the release notes there you also find them linked below the video and the interesting thing here is that they follow a faced release process now what that means is that vue core the core framework is finished it's stable it's out there but some other parts of the framework for example the router and ux integration in the dev tools so some other packages and things that belong to the framework and to the view ecosystem are not final yet that's why the vue team decided to go with this phased release process where for the moment if you for example visit vue.js.org you still end up in the view 2 docs there so you still start with view 2 there also if you install vue via npm so if you run npm install you also see that at the moment you get view version 2 on that latest tag you need to run npm install view at next to get that real latest version and you need to visit v3.viewjs.org to get to the view free version of the official website and documentation nonetheless view version 3 is final and the version you should learn right now the version you should dive into right now you just should be aware of this phased release process and that all parts like the web page and the npm install latest version will only be switched to vue free at the end of the year that's the plan at least as you can see here so that's something to be aware of nonetheless now is the time to learn viewfree and if you're just starting with vue i would recommend that you do that with view version 3 because it is stable and it is the future of view and the parts which still get some work might not matter to you you can find the next steps on which the view team focuses here and none of these parts should have a strong impact on you if you're just getting started with view at the moment so with that let's now explore what changed with viewfree and what's new so in this video i'll dive into the important new features and changes viewfree introduced the good news is that generally what you learned about view 2 still applies to view free there aren't any major breaking changes that would force you to relearn everything that is not the case but there are a couple of changes and a couple of new features you should be aware of so that's what we're going to have a look at in this video i also want to highlight that i will completely update my existing view 2 course so if you got that or if you are getting it now you get the entire view free update for free and i will re-record the entire course based on view free even though we don't have that many changes but this also allows me to improve the overall quality and therefore you will get this as part of my existing view 2 course it might already be updated when you're viewing this below the video i'll post and update the description once the course update is out so let's start with the changes and you will find timestamps below the video in the video description if you want to jump ahead to specific changes you're interested in here i will just highlight the most important changes which will likely affect everyone or at least a lot of people for an exhaustive list of all changes no matter how big or small they are and all new features definitely check out the official migration guide which you also find linked below the video now the changes i'm going to list here will also all be shown in detail throughout this video one change that will affect everyone is that you now create your view instances your view apps differently than before the syntax changed and therefore you will need to change this in your apps as well but changing it is simple as you will see in addition the data option now must always be a method it's no longer allowed to be just an object and another change that will affect everyone is related to how you register components directives and third-party modules this will now all work a bit differently as you will see but updating this and changing this will also be simple if you're using transitions in your app the transition component css class name changed the dash enter class is now dash enter from and i'll show this in an example as well and that's almost it when it comes to just view as i mentioned check the official migration guide for all minor changes as well but these are the most important changes you should definitely know now if you're using the view router there we now also create the router differently and transitions with the router so if you have animations for switching pages that also works differently now for ux it generally works as you learned it but we now create our store differently so these are the changes and i'll cover them with concrete examples throughout the video we also got a couple of new features which i'll cover we got two minor but nice to have changes a teleport component and support for fragments and i'll explain both what it is and why and how we use it in this video of course the biggest new feature which was added with view free is the new composition api which and this is important is 100 optional you can use it to replace the options api so you can use it to build your components differently instead of using data watch methods and compute it you can use something else but it is optional it'll not replace the options api you can use it but you don't have to and i'll also dive into that in detail of course and then kind of a new feature we got better typescript support you could always use typescript with view but since view 3 was internally rewritten from scratch and uses typescript internally it now has better support now using typescript is still optional and at the moment at least i'm not using it for most view projects but if you want to use it you get better support so that's the overview with that let's dive into the concrete examples i prepared a little project you'll find a link to the github repository with all those examples attached to the video in the video description and here we can walk through all those important changes and let's start with a basic app with basic app v2 here i'm creating a basic view app with view version 2. creating my view instance having some data having a method to change that data and having a component with a template which basically has a button where i emit a custom event that's what i'm doing here and if we view this application by simply opening this html file in the browser this is what we see and when we click the button this works now this is view two and this is what you probably know with view free a couple of things change here to be precise i'll now cover these first three changes which i outlined here because all these changes affect what we see here so let's go to basic app v3 there we first of all have to make sure we import the latest version of view and for that i currently have to add at next year since at the time i'm recording this view three is in release candidate phase and not really finally released yet in the future of course this default cdn link will automatically pull in view free and i will update this repository such that all the cdn links are correct all the time so here i'm now importing view free by adding this and with that added here we'll see that if i now open this index.html file in the browser this fails now we clearly don't see the message anymore because this base syntax here changed a little bit with view free here in app.js in the v3 folder i got the view to syntax but this will not work anymore instead to create a view app we now no longer instantiate the view constructor function here instead on view we call create app that's a new method that was added with view free now to this create app method we now need to pass our app config object and here we can pretty much copy the object we used in view 2 as well but there are two other changes you should be aware of the l property doesn't work anymore instead we now mount our app to the dom by calling mount on the created app object so on the result of create app and to mount we pass that css selector which we previously had in l and we can get rid of new view now that's the first change in addition though i mentioned that the data option also changed and now always needs to be a method now in view 2 both was allowed you could have just an object and you could have a method though a method was recommended in view 2 as well especially if you worked with multiple components and so on then you needed a method well now with view 3 data always needs to be a method so we simply should turn data into a method which then returns our data object so that's the only change we need to make here besides that it works as before and for example methods computed and watch those things all work as you learn it nothing needs to change there and with that we already covered the first two changes here now the third change which we should be aware of also affects this demo app i prepared components directives third-party modules all those things are now registered on the app instead of the global view object so calling view.component that's not how this works anymore instead createapp creates an app and we can store this in a constant and then on this app we can call mount for example now it's also on this app that we have to call component directive and use to use third-party modules we'll see use an action later with the router and view x so here we can call component and then pass this component code which we also passed to the component method before so these two arguments cue this component method here so it works as before but now it's on the app instead of the global view object so with that we get rid of this line here as well with that however if i save all of that and i reload we got our message back we got the button and it works now one minor change which i didn't highlight on the slide if you have a component that emits a custom method like here this component it emits update there also is a new option you can pass to this view instance config object here and that's the emits option it's basically the counterpart to props you could say with props you specify all the props a component receives and that was already the case with view two with emits you now can and should also specify the custom events a component emits it's technically not required but it makes your component easier to understand now i can immediately see which custom event will be emitted somewhere in this component it's a minor change but also something to be aware of and with that we covered these first three changes you should know now the fourth change is related to transitions there a css class name changed i also prepared an example for that the transitions folders here let's start with transitions v2 if we open that in the browser we got this button and with that we can toggle the box here which has a transition attached to it this transition works simply because i'm wrapping the box with the built-in transition component and then adding my transition css classes down there in the css file and this all worked with view two of course because that's a view to example here now with view free this changes if i make sure that i import view free here in the v3 folder this example if i load the v3 example breaks now it breaks because we need to create the app differently so let's quickly do that view create app instead of l call mount here and then all the make sure data is a method that's what we just learned i just wanted to practice it here again but that's a simple change of course with that we create the app properly and hence if we reload now this works but you'll notice that the remove animation works but the enter animation does not work because a css class name changed the dash enter class is now dash enter dash from basically to be in line with the other class names because we had dash enter dash active and dash enter dash 2 already now we also have dash enter dash from for the starting class instead of just dash enter and it's the same for leaving this here should be dash leaf dash from instead of just dash leaf so a simple renaming of the class names is enough here and once we do that save everything now we got the animations back in view free as well so that were transitions we also got changes when we're using the view router so let's see what changed there for that i also prepared two projects here's the view 2 version here's the view free version and here i used the view cli to create projects so it's no longer just the index.html file therefore i'll navigate in router v2 run npm install and then npm run serve and this will install all the dependencies and then also bring up the development server for the view 2 version of this app here once you load the app this is what you should see on the screen we got two routes and we can switch between them and we got a nice animation now how is this built i simply have my router setup in main js by using view router which is imported from the router and by adding the router here to the global view instance registering all the routes setting mode to history and we have the animation because the router view is wrapped with this transition this is how it works in view two that's what you also learned in my course if we go to the v3 version and also install everything there and start the development server we'll see a difference to be precise initially will not see anything because i haven't added routing there yet in the router v3 folder in main.js we still have to add the router for a good reason because we now add it differently than before instead of importing view router from view router i already installed the v router package here that's why it's available but instead of importing it like this you import create router from the router so you might see a theme here we have create app from view to create a app we have create router from the router to create a router this is the new way of creating things in view free now once this is imported we can create our router by calling create router and we then use this router on our view app so we can store the app in a constant and then call use on the app instead of on the global object i mentioned before that we no longer do that instead we call app use and use the router this is how we add the router but now we also need to configure the router for that we still pass a config object to create router and now we can generally grab the configuration from u2 so here i will grab the object which was previously passed to the router and paste this here into my create router function call the routes configuration works just as you learned it that's the good news the mode however is set up differently instead of setting mode to history you now need to set a history property in this config object and then create a history with another function and here you typically import create web history and then simply execute this here and the result of that is provided as a value to history this is how you set up a default router using the html5 history mode for routing with that we just have to add the imports to welcome screen and users list copy that from the v2 example into main.js in the v3 example like this and now if we reload our routes work again but you will notice that the transition is missing we got no animation i also have another small addition or note which i want to bring up first in the header component in the v3 project there is the exact prop on router link this prop was needed with view 2 and the router for vue 2 to make sure that the home link wasn't marked as active when we were on users because users also starts with a slash with viewfree and the router for viewfree the router works differently internally and you no longer need this it will automatically detect that home isn't active if you are on users that's just a minor thing but also worth knowing more important than that as i just mentioned the transitions don't work anymore the reason for that is that with view 3 and the router for viewfree you no longer may wrap router view with transition instead it needs to be the other way around now you need to pass transition into the router view so the router view should wrap transition this is related to changes made internally in the view router package so router view in the end has a slot internally and needs this transition the problem just is transition of course should wrap the component that is swapped and for that you can use another feature built into view it's the dynamic component feature you can use the built in component component this tells view which component to render now the router determines which component should be rendered and you can get access here in this slot in the end by using a feature called scoped slots this feature already existed in view 2 and in my latest course update the view free course update which i added to my existing view course i cover it in detail as well you simply have a directive the v slot directive which you add to router view and there you can then get access to special props which the router view exposes to you you can now use these props here between the router view tags and bind the is prop on component which component needs to slot props dot component with a capital c this prop here is exposed to you by the router and it holds the component that should be loaded for the selected route this syntax certainly looks strange but you only need it if you plan on using transitions with the router otherwise you don't need it with that however if i save this now the transitions are back well at least almost we also need to adjust the transition names as you learned a second ago it's now enter dash from and leave dash from and once we do that now the transitions are fully fixed and now we got nice animations for entering and leaving you might notice that if you load the app you also got an initial transition here and that's also related to how the view router works internally if you want to avoid this you need to mount your app only once the router is fully initialized and you can do this by going to main.js and calling router is ready which gives you a promise which resolves once the router is ready so if you mount your app in the function you pass to this then block then you make sure the app is only mounted once the router is fully initialized and this will ensure that you don't get this initial transition so with this change made to main.js now we can load without the initial transition and we still got the transition for route changes so as you can tell we have a couple of changes to the view router not to its core logic but how you set it up and how you add transitions and now i guess you are aware of these changes great now the last change i want to cover here is a change to view x the store is now created with create store there i also got an example for that you find it in the ux folders and if we have a look at the view 2 version here with npm install and npm run serve you will see that it works just as you learned it we create our view x store by instantiating new ux store and passing our store config to it and then we add the store to the view app like this with that this is what we get and here we got a basic store which is managing this list of users here now with view free this works differently if i dive into the v3 version of this and start this all we first of all have to add view x again just as we had to add the router before because now we add it differently as you might guess now we import create store from ux again to be in line with how we create things in view free then we create our store by calling create store and now the good news is to create store we pass exactly the same store config object as we did with view 2 and view x for u2 so we can grab this object here which holds the state and mutations and actions and getters and we use that same object here for view free and that's important how you work with ux and which features it has that has all not changed you still have actions getters mutations state you can use modules that's the same but now we create a store like this and we then add it to our app by you might also be guessing it already by using it so on our app we simply use the store and if we also had a router here we would simply use the router as well we don't have it here but this is how you would use it and with that if you reload the view free version this also works without any other changes now that's it for the changes you should be aware of now let's dive into the new features here we got a teleport component and a feature called fragments now what's that all about again i prepared something for you the teleport fragments folder let's dive into that and npm install and npm run serve once this is up and running if i reload that is what i got and if i click on a button here i get this modal where i can confirm that i want to deactivate this or cancel and if i confirm it's gone so a very simple dummy app here using view free now here we can use two new features teleport and fragments let's start with teleport if i open this modal we can inspect this in the dev tools and here in the elements tab we actually see that this dialog and the backdrop is rendered somewhere nested in our element tree right so this is the real dom and our backdrop and dialog is deeply nested in the dom now visually that's no problem but it's actually not perfect for semantics for accessibility maybe and it could even break your styling if you don't work with set index for example in general this of course should be an overlay to the app so logically it should not be deeply nested in the dom tree instead it should be directly inside of the body for example now this is not something you technically need but it simply would be a bit better logically semantically from accessibility perspectives and hence it would be great if we could move this div and the dialogue to a different place in the dom with view 2 this wasn't really possible with view 3 it is we now get a feature called teleport if you know react there it's called portal now how does it work in the component where you want to move things for example here in the confirm dialog component you can simply wrap your entire component here your entire template with a new built-in teleport component just like this and then on teleport you need the two prop where you pass in a css selector for example selecting the body element to make it clear that everything in here should actually be rendered directly in the body now you still use this component as you did before so i can still use it in the template of another nested component as i'm doing here in admin mode this is still possible we can still pass props to this component listen to events this all works as you learned it but now the actual dom which is rendered will be rendered in a different place if we save that and reload i can still view this modal but if we now inspect it we see this div the backdrop the dialog and the div which holds both that's now directly in the body it's not deeply nested in our other component tree in our other node tree i should say so that's teleport a nice new feature which allows you to write semantically more correct html code i guess another nice feature is the fragment feature here in admin mode i got this confirmed dialog inside of this list item now technically i can place it anywhere because we just learned that the html code will be rendered somewhere else but still to make it clear that this is not really in the list item it just belongs to this component we might want to move it out of there and with view 2 this was not allowed my ide still gives me an error here but i can tell you with view 3 this is allowed with view 3 you may have multiple root elements inside of your component template you're not restricted to have just one you can have multiple sibling elements directly in your template this is new this was not supported with view 2 now with view 3 this works as you can tell we got no error here and that's teleport and fragments now the biggest new feature which is 100 optional is the composition api the composition api can replace the existing options api and i actually want to take a closer look at this composition api therefore i'll have this in a separate video which you of course find also linked below this video before we go to that separate video though here's the last new feature i wanna touch on it's kind of new typescript support you always could use typescript with view with viewfree it's now easier because viewfree internally is built with typescript now if you want to learn more about that i recommend the official docs there you can learn all about typescript support and how to use typescript in your viewfree projects and how to write typescript code there it's an alternative you don't have to use typescript i'm using javascript in most of my projects but you can use typescript if you prefer that

Channel: Academind

Views: 106,424

Keywords: vue, vue.js, vuejs, vue 3, vue3, vuejs 3, vue.js 3, vuejs3, vue 3 whats new, vue 3 features, composition api, vue 3 composition api, vue composition api, vue 3 update, vue3 update, maximilian schwarzmüller, maximilian schwarzmuller, maximilian schwarzmueller

Id: A5cVyjrKx_Q

Length: 30min 47sec (1847 seconds)

Published: Mon Sep 21 2020