Quasar & Vue 3: iOS Page Transitions WITH Routes! [#1] (Real World App #9)

in this video you're going to learn how to use quasar 2 and view 3 to create this beautiful ios style app with ios style page transitions where every page has its own root from scratch so in this app we have three different sections the home section the questions section and the images section and each section has its own child pages which load with this beautiful ios style animation and each child page has its own root as you can see in the address bar which means we can jump straight into the app at a particular child page so i'm on the deepest page of the home section here so if i just copy that and close the tab and open up a new tab paste in the url then we jump straight to that child page without any unusual transitions and we can also display long amounts of content on each of our pages and we can maintain the state of our pages as well so if i change the option in this radio group and jump to a different section and jump back again you can see the state is maintained and we can also swipe to go back up to our parent pages and we can even jump to a child page which is in another section of the app and we can also remember our position within the app so if i jump to the home section and jump down to this grandchild page jump to a different section and tap the home tab navigation we end up right back on that child page and just like you'd expect on a real mobile app if we're on a child page within a particular section and we tap on the current navigation tab then we jump right back to the root of that section and we can also display dynamic content within our app such as this image gallery where every image detail page loads in a different image and a different title and we're also going to get this running and working as a real ios app on a real ios device and this app will also work well on an android device as well in this series i'm documenting my journey creating a real world app budget 2 from scratch using quasar 2 view 3 and the composition api an app that will ultimately be deployed to the ios android mac and windows app stores make sure you subscribe and click the bell so you don't miss any of the videos in this series and you can find the link to the whole playlist in the description let's do a quick budget to progress report before we get on with our ios page transitions tutorial so the first thing i've done is i've got this drag and drop functionality working correctly so i was originally getting this working using the view draggable next package and i thought it was working okay but then i found this weird issue where if i swiped an item left and then swiped it back to the right i couldn't use the drag and drop functionality straight away so i'd swipe left on this swipe right and then click to reorder and it just wouldn't work and it would only work if i clicked on something else and then clicked on the item to reorder it and i spent several days trying to get this to work and it was a huge headache i even dived into the view draggable source code and tried to make changes to get it to work correctly and i just couldn't get it to work so in the end i actually removed view draggable next from the app and instead use the raw package which viewdraggable is based on which is sortable so if i just jump to my budget store file in source store budgets store dot js so when we first load this page i'm firing this sortable init method which is initializing sortable on the container element that we're selecting here and i also have this sortable destroy method so this actually gets fired when we swipe to reveal these options so we swipe to reveal the options and the sortable instances completely destroyed and then when we swipe this back we run this sortable init method again to re-initialize the sortable which means i can now swipe left on an item swipe back and immediately begin to reorder the items and the next thing i've done is add my first composables to the app so if we go to source and use i have these two composables this first one use amount class is used for adding color classes to some text based on an amount so if you look at these three budgets here i'm spitting out the balance of the budget and if the balance is positive then we have this green color the current themes positive color and if the balance is negative then we just play the red negative color and if the balance is zero then we just display this gray color so if i jump to components budgets and budgets list item and scroll up a bit so i'm displaying that balance here and as you can see i'm binding to the class attribute and i'm just passing this use amount class composable into that and i'm just passing in the budget balance to this composable function and to use this composable all i need to do is import it and then return it in the setup method so i'll just jump to the use amount class composable so this is going to receive the amount as a number and then it's just going to spit out different classes depending on the amount so text positive if the amount is greater than zero text negative if it's less than zero and text medium if the amount is just 0 which is just this gray color so i can now easily use this color functionality anywhere within the app so i'm also using the same composable in this all budgets balance widget that you can see at the bottom so right now the overall balance of all of the budgets is negative so we see the red color and if i delete april the overall balance is now positive and we see green and if we delete march then the overall balance is zero so we see the gray color and i've also created this use dialog confirm composable which makes it really easy for me to display customized dialogues anywhere within the app using the dialog plugin so if i swipe left on a budget and tap delete then we see this dialog here and this dialog is being displayed with the dialog plugin and not the dialog component which i'm using for more complicated dialogues such as this add budget dialog but in order to display this dialog using the dialog plugin while also giving it all of the same styles as my other dialogues which are using the dialog component this required a lot of different options so you can see all of these default options here so i'm enabling html i'm adding a class to give it a background color i'm giving color classes and text size classes to the buttons i'm enabling no caps and unelevated so we have flat buttons like in the rest of the app and i didn't want to have to pass in all of these options every time i trigger the dialog plugin i just want to display a simple dialogue like this so if i jump to my store folder budgets and store budgets i'll just search for delete so this delete budget method is fired when we try to delete a budget so now all i need to do to display a nice dialog like this which matches the style of all of the other dialogues it's just trigger this use dialog confirm composable function i'll just pass in the title and the message and i can also optionally override some of the default options like i'm doing with the ok button here which i'm changing to red and then this use dialog confirm composable we'll add all of the other default options that we need all of these so that i don't need to pass them all in every time i trigger a dialog with the dialog plugin so these are all of the default options and i'm using this package called deep merge to take the custom options that we're passing in so the title and the message and anything that we want to override and merging that with these default options and then firing the dialog plugin with those options all merged together and i've also added some extra fields to the add budget dialog so these check box fields which when we check them displays these extra fields with this nice little animation so if i jump to components budgets dialogues and dialogue add budget so i'm adding these little animations with the fade in down and fade out up animations and to create these indented style fields with this little dashed line thing which you can see here if i just jump to dialog dot scss so to add this indentation on this little dashed line thing i'm just adding a little bit of margin left to the field and then i'm using the before selector to basically add a little square here or a little rectangle with a specific width and height and then i'm just adding a left and bottom border to this box a dashed border to create this dashed line effect and i've also added some nice animations for when we delete and add a new budget so if i swipe left and delete this budget we can see this nice animation where it sort of zooms away and drops down so if i just jump to components and budgets and budgets list dot view so to create that effect when we delete a budget i'm using the back out down animation and then when we add a new budget we see this nice little fade in with a little kind of wiggle animation and to add that animation i'm using the jack in the box animation finally i've added this draw component which can be added to any of the panes of our app and on mobile these panes take over the entire screen whereas on desktop stretch this out a bit these panes will only take over the pane itself so i'll just jump to the component for this so i'll go to components global pain pain draw and i'll also open up pain draw inner where most of the elements reside so i'm not actually using a q draw component here because q draw components will be fixed to the left or the right by default and i wanted this draw to take over the entire page on mobile whereas on desktop i wanted it to just take over the pane and so the way i've done this is by using a teleport component which is a new component in view three so on mobile i'm actually teleporting the inner part of this draw this component here to the body tag so this draw here is actually being rendered at the root of the app in the body so that it can take over the entire page so that it can be displayed over our footer etc whereas on desktop i'm not using a teleport and i'm just displaying the pane within the pane itself uh just like i did with the settings page i've also set up individual field components for all of the different kinds of fields that we can find in a draw so if i just go to the pane folder i have components for a checkbox that's in a drawer or an item such as one of these clickable items and also a component for these separators that you can see and just like for the settings page i'm also outputting these options dynamically from my store so if i go to store budgets and store budgets and we jump to this draw item in the state we can see all of the fields here so if i want to add anything to this draw i can just add some options here much like i showed you in the settings page and one thing that i'm pretty happy about is that i found a way to proxy a setting from one of these drawers to a setting that's in my settings store that's on the settings page so this option here show our budget's balance when we untick that this widget down here will disappear and if i jump to the settings page um budget options we can see the same option here show all budgets balance so if i tick that jump back to the budgets page we see this widget again and if we look at the draw we see that option is enabled again so this option here is actually being linked to the option which is on the settings page and in the settings store and the way i'm doing this if i just jump to this draw object here so this is the field here show all budgets balance so we pass in the field type as usual but instead of passing in a label and a change method for displaying the label and adding functionality for when the user changes this option instead i have this proxy2 property which is just set to the path of the corresponding option in the settings store so budget options dot fields dot show all budget balance so if i jump to the settings store store settings and we jump to budget options and then show all budget balance so that option that is in the pane is being proxied to this option so again we do that by just adding this proxy to option and specifying the path so then if i jump to the check box field component in components budgets no not budgets global pain pain draw pain draw fields pain draw field check box and if i scroll down so if this proxy 2 property has been provided then we're actually grabbing the field that this component is using from the settings store by using that path that was provided i'm using the eval method to actually run this as javascript and grab the field that we need from our settings store and i know this is a little bit dirty using the eval method and it's pretty frowned upon but i haven't managed to think of a better way of doing this so if you know of a better way then please let me know down in the comments so doing it this way i can use the label and the field from the object that's in the settings store without having to duplicate stuff in this draw object in my budget store [Music] well the thing i'm most excited about is creating this ios style app with these ios transitions with roots for every page because i've been wanting to achieve this functionality ever since i started using quasar and although i've always thought quasar is amazing and probably the best framework out there this always stood out for me as a major limitation of quasar the fact that we can't at least out of the box create a true mobile app like experience using quasar with mobile app like transitions with roots to go with it and i've noticed a lot of other quasar devs have been trying to achieve this functionality as well but i've never actually seen a working solution provided by anybody and since i've been doing this series on budget i've had a lot of people asking me about these transitions which i'm using in fujit a lot of people have asked me if i can provide the code for this but the truth is what i've got going on in budget here is kind of a half-baked solution because we don't actually have any roots for these child pages so we're on slash budgets here and if i jump to a budget we're still on slash budgets and likewise in the settings section we're on slash settings and if i jump down to one of the child pages we're still on slash settings so this isn't a real solution to the problem because i can't actually directly jump to this ask a question page for example although i will at some point be integrating routes into fujit like i've done in this project that we're going to build here so i decided to spend some serious time on this and see if this could be achieved with a quasar project and it was a real struggle i tried several different approaches and ended up giving up on it several times and in the end it took me a couple of weeks to get this working but i finally got this true mobile app like experience working in a quasar project this is actually quite complicated so it's going to take a couple more videos to go through this tutorial but let's create this thing from scratch using a new quasar 2 project so if you haven't used quasar before you want to go to quasar.dev and at the time i'm recording this quasar 2 is still in beta so i'm going to click on the quasar v2 link although you might not need to if you're watching this in the future and then we want to go to quasar cli installation and if you don't have quasar installed you want to install that by running one of these commands in your terminal and you also need to make sure you have node.js installed which you can install at nodejs.org and i usually go for the one on the left and once that's installed we can create a new quasar 2 project with the quasar create command so i'm going to jump to vs code make sure i'm in the folder where i store my projects and run quasar create let's call this quasar dash ios page dash transitions because quasar 2 is still in beta i'm going to add dash dash branch next although you might not need to again if you're watching this in the future so let's run that and i'll leave the project name i'll change the product name to quasar ios page transitions and i'll leave the project description and i'll put my name for the author and i'm going to use sas with scss syntax i'm going to disable eslint with the spacebar although you might want to consider using that in your own projects and hit enter and i'm going to use npm to install the dependencies let's finish creating the project so i'm going to drag the folder into vs code and open up the terminal and run quasar dev and we can now see the quasar starter app running in the browser before we get started i'm just going to switch to a mobile view and increase the size a little bit let's get going [Music] let's start by creating an ios style layout so i'm going to jump to source layouts and main layout.view and we're not going to need a draw for this app because we're going to have navigation tabs at the bottom so i'm going to remove the qdraw component and i'll also remove this button for toggling the draw i'm going to remove this essential link import and get rid of this links list const and remove this components object and i'll just remove everything inside this setup function and we can also delete the essential link component in the components folder so i'll delete that i'm going to get rid of this define component thing apparently this improves intellisense adding this but it doesn't actually do anything else but i've not really noticed any difference so i'm going to get rid of this define component method which is being triggered on this object i'll make sure we get rid of the closing parenthesis as well we can remove this import statement and i'll save that i'm going to jump to the quasar site the quasar version 2 docs i'm going to go to layout and grid and layout header and footer i'm going to jump down to ios look and feel i'm going to grab the code for this layout here so i'm going to go to view source and i'll just copy the queue header and replace our current cue header fix the indentation and i'll also grab this cue footer and paste that underneath the cue header uh let's save that and see how that's looking i'm going to remove this quasar icon from the header which is this cute avatar component i'm going to remove three of these cue tabs in the footer i'm going to split the attributes on the cue tabs component using the split html attributes extension and i'll remove this v model we're not going to need that i'm going to replace this q tab with a cue root tab and again i'll split the attributes and we're not going to need the name attribute and i'll change the label to home because this will be a link to our home section and i also want to add icons to our tab navigation and i'm going to use line awesome icons so to install line awesome we can just go to quasar.com.js i'll just search for line and we can see it here in our extras array so we can just uncomment this line save that and we can now use light and awesome icons in our app so i'm going to jump to line awesome icons eight dot com slash lion awesome and i'll search for home and this icon looks pretty good so i'll click on that and we're going to need these classes here so i'm going to copy that i'll just paste that under our cue root tab and i'll add an icon prop to this cue root tab and we can just paste in these classes here and then get rid of this eye tag and save that and this is looking pretty good and i'm also just going to update our primary color to a nice green color so i'm going to jump to source css and quasar.variables.scss and i have a color code in my clipboard here so i'm just going to paste that in so that's zero zero nine six eight eight well you can choose a different color if you like i'll save that and we now have a nice green color for our primary color [Music] since we're going to have different sections in the app home questions and images with each section having its own set of child pages let's create a folder for each section so i'm going to jump to source and pages and i'll create a folder here called home i'm going to move this index.view page into that folder and i'm going to rename that file to home.view and we need to set up our routes so i'm going to jump to router and routes.js and let's give each section of the app its own slug in the url because we're going to have to do some pretty fancy stuff with our routes and links later on to create the mobile app like experience and do things like remembering where we were within a section and being able to jump back to that child page and being able to jump back to the root page when we click on a tab when we're already deep within a particular section so it's going to be much easier for us if all of our sections are at the same level in our route structure so we'll place our home page at the path slash home and we'll change the import path to slash pages slash home slash home.view and save that but since our app is going to start at the path slash then we need to add a redirect so we can just add another path here and set the path to just an empty string and we can add a redirect property and we want it to redirect to this path slash home so we can just set this to slash home so if we save that now reload then we're immediately redirected to the path home and we can see our home page let's create our own global page component that all of the pages of our app can use from our root pages down to our child pages and grandchild pages and we're not going to use quasars q page component because we're going to need quite a bit of control over how these pages are displayed for the animations and also we're going to have pages nested within pages and i found that when i had cue page components nested within each other then this would often trigger recursion bugs whenever i saved certain files in the app so let's create a new folder in the components folder called page and we'll create a component called page.view and i'll scaffold a view component using the vita extension i'll get rid of the style block and for now i'm just going to put the text page in the template so i'll save that and since all of the pages in our app are going to be using this component let's set up a boot file which will load this component and any other components as a global component so that we don't need to import it everywhere so i'm going to jump to the terminal and kill the dev process and run quasar new boot to create a new boot file and we need to specify the name so we'll call this global dash components and it's created that and it said make sure you reference it in the config file so i'll jump to the config file and add this to the boot section so global dash components save that and if we jump to source and boot we can see our boot file there global components so let's launch our app again with quasar dev uh let's work on this boot file so i'm going to remove these comments on this comment here and i'll uncomment this bit we're only going to need the app in here not going to need the router or anything uh let's set up an object where we can store all of our components so we'll call this global components and this will be an object and for each item in the object we'll set the key to the html tag for the component and we'll use the html tag page for this page component and we'll set the value to a require statement to grab that particular component so we'll do require default and then pass in the path so this is going to be at components slash page slash page we don't need to put in the dot view so what we can do now is loop through each item in this object this global components object with a for in loop so i'm going to just type in 4 in and split out the default snippet and i'll just get rid of this if block the object we want to loop through is this global components object so i'll change that to global components and we can use the app.component method to declare a global component and this is going to expect two parameters the first parameter is the html tag so that's going to be at key and the second parameter is the component itself so this is going to be our global components square brackets and the current key so i'll save this and hopefully now this page component should be available globally and we should be able to use it without having to import it so i'm just going to jump to our home page and while i'm here i'm just going to get rid of this define component stuff and also change the name to home and we'll get rid of everything inside here inside the template and we should just be able to use our page component without having to import it so let's see if that's working i'll save that and yeah we can see our page component is being used here and so now if we want to create any more global components then all we need to do is add them to this object [Music] okay let's work on this page component first i'm just going to add a name property and set that to page let's add a div for our page and we'll give this a class of page so that we can style it later on we'll give it a class of absolute top to position it absolutely to the top and we'll give it a class of fit to give it 100 width and height and by the way you can find all of these classes on the quasar site and we'll also give it a class of bg-white to give it a white background and save that now let's move our header from our layout file to this page component because all of the different pages of our app are going to need to have their own header and they all have different titles and some of them are going to have back buttons and some of them are not going to have back buttons so let's jump to main layout.view and we'll cut this header and save that jump back to page dot view and we'll paste that in here and save that i'm going to split the attributes on this q header component and we'll also give this a class so we can style it later on so we'll give it a class of page dash header save that and by default cue headers are fixed position so we're going to change this to absolute position because if they're fixed then when we do the page transitions and we move the pages around then these headers will stay exactly where they are so we'll also add a class of absolute top to the cue header and save that i'm going to reduce the text size of this toolbar title as well using one of quasars typography classes which you can find in style and identity and typography so i'm going to add a class of text dash body one save that and i also want the title in the header to use our theme's dark color so i'll add a class to the queue header of text dark and save that and that's not working because we already have a class of text primary so i'll get rid of that class save that and i've had some issues with using the cue header component with this setup where we have nested pages again like the q page component that i mentioned earlier i had like recursion bugs and stuff like that whenever i saved certain files so let's grab the underlying markup from this cue header and use that so i'm just going to inspect this cue header right click and edit as html i'll just copy all of this markup and we'll paste it over this cue header here we need to fix all of the format in so i'm just going to quickly do that i'm just going to move this page header class to the start of all the these classes because that's going to be quite important that class and this is looking pretty good now and i've just noticed this warning in the console missing required prop 2 on this root tab so i'm just going to quickly fix that in main layout.view i'll just add a 2 prop to this cue root tab and set that to slash home save that and we now see this activated as well with the primary color but uh back to this page component let's add a q scroll area where we can display our pages content so after this header i'm going to add a cue scroll area and i'm going to add a class of page body in case we need to style this later a class of absolute top to position it absolutely at the top and a class of fit to give it 100 width and height i'll stick a paragraph in here with some lorem ipsum uh just so we can spit out a bunch of these i'll add a v4 directive set that to i in 20 and set the key to i and this should give us 20 of these paragraphs now this q scroll area is actually taking up the whole of our page so the content is going right behind the header right below the footer as well so let's add some divs to the top and bottom of this cue scroll area so that we can add a little bit of space at the top and bottom so inside this q scroll area at the top i'm going to add a div with a class of page dash body dash spacer header and then i'm going to copy this and paste it at the bottom of this q scroll area and change the class to page body spacer footer let's add some style to give these divs a specific height uh just for simplicity i'm going to be putting all of my styles in the main css file so in source css app.scss so i'll add a comment here which says page and we'll target the page class and then within that we'll target the page dash body class and then within that we'll target the page dash body dash spacer class and then within that we'll target the header and footer spaces okay so let's see how tall our header is uh this is 51 pixels so we'll set this to a height of 51 pixels and then we'll see how tall the footer is and that's 73 pixels so we'll set the height of the footer spacer to 73 pixels and save that and we can now see all of our content at the top and the bottom i'm just going to add a div with a bit of padding around our content here so around this p tag i'll add a div with a class of q dash p a dash l g for some large padding and i'll stick the p tag in there and save that and this is starting to look pretty good and if you're enjoying this video so far do me a favor and smash the like button and leave a comment tell me what kind of app you're going to make with this setup [Music] let's create individual global components for our page header and our page body so i'm going to cut this header element here and save page dot view and we'll create a new component in the page folder so i'll duplicate the page dot view component uh this duplicate file or directory option is being added by the duplicate action extension that you can get in the vs code extension store so we'll duplicate that as page header dot view and we'll open that up and i'll just get rid of everything inside the template paste in our header and change the name property to page header and save that and we want this to be a global component so we'll jump to globalcomponents.js and add another item to this object set the tag name to page header we'll update the path to page header at the end there and save that let's do the same thing for our page body so we'll cut this q scroll area save page dot view we'll duplicate page header as page body dot view paste in our cue scroll area into the template change the name property to page body and save that and we'll add this to our global components as well so we'll duplicate this last line change the tag name to page dash body and update the path as well to page body and save that now let's jump back to page dot view and we'll add a default slot inside this div with a class of page so that we can easily inject a header and a body into our page so we'll save that and if we jump to our home page in the pages folder home home dot view we should now be able to inject a page header and page footer here so we'll add the page header and the page body sorry not footer and save that and we can now see our header and body again on this home page now we want to be able to inject any title we want into our header because all of our sections and pages are going to have different titles in the header so let's add a named slot to our header so we'll jump to page header.view and let's replace this quasar framework text with a slot and we'll make this a named slot because we're also going to have another slot for buttons in our header later on as well so i'll set the name of this slot to title and save that so now if we jump to home.view we should be able to pass in a template here and then we can just add hash and the name of our slot which is title and we can pass any title we want in here so if i just type in hello we can see hello up there and we also want to be able to inject any content we want into the page body so let's also add a default slot there so we'll jump to page body dot view i'll just replace all of this div here with a default slot with no name save that and now we should be able to place anything we want within this page body and save that and we can see it on the page and i'll just add a div here with a class of q p a l g so we have a little bit of padding save that uh let's update the title so we'll change that to home save that and let's add a bunch of paragraphs again so i'll add a paragraph with some lorem ipsum we'll add a v4 loop again so we can have a bunch of these so v4 i in 20 set the key to i save that and there we go so now as you can see with this set up all of our pages are going to be nice and clean they're just going to have the root page component the page header component and the page body component with whatever content we want for that page within the page body component [Music] let's add our first child page to this app so i'm going to jump to source pages and home and we'll duplicate home.view as child.view we'll change the title in the header to child and we'll change the name property to child as well and save that and we need to add a child route to this page within the route that we've set up for our home page so let's go to router and roots.js uh let's split this home route up onto multiple lines and we can add an array called children here where we can pass in some child routes for this slash home route so i'm just going to copy this path and component and paste it in this children array actually this needs to be in an object so let's put those in an object uh let's set the path to slash home slash child and the component is going to be pages slash home slash child dot view and we'll save that let's add a button on our home page which links to this child page so we'll jump back to home dot view and at the top of our body in this div with the padding we'll add a cue button component and we'll set the to prop to slash home slash child we'll set the label to go to child page um we'll set the color to primary and let's save that and see how it's looking i want this to be a full width button so let's add a class of full dash width and i want some margin at the bottom so we'll add a class of q mb for margin bottom dash md for medium i don't want this to be a rounded button so we'll add a rounded prop save that and i want to remove the drop shadow so let's add the on elevated prop and i don't want this to be capitalized so let's add no caps as well and save that and that's looking pretty smooth so let's click on this button and see what happens so you can see in our address bar the path has updated to slash home slash child but we're not seeing our child page and why is that well that's because if we go to main layout.view this router view here will only load pages which are at the root of our routes so pages which are at the top level such as home.view if we want to load a child component which is in one of these children arrays within one of our main routes then we need to add another router view component to the parent page so let's open up our page component in source components page page dot view and we'll add another router view here so we'll place this after our slot here so router view save that and we can now see our child page and we can go back to our home page as well okay so we can get to our child page we don't want this child page to just suddenly appear like this we want it to slide in like this with this badass animation so let's add this animation next so i'll jump to the quasar site and just search for animation i'll jump to the animation section so we can use any of the animations from animate.css so i'll just open that up and just scroll down these transitions so we have this slide in right animation which we could use for sliding our page in and this slide outright animation we could use for moving the page back off the screen when we go back from it so i'll jump back to the quasar page so we need to add the animations that we want to use to our config file so i'm going to jump to quasar.com.js in the root and search for animations and we can add those here so we want to use slide in right and slide outright so we'll pass those in here slide in right and slide out right and save that and we should now be able to use these animations and if we scroll down a bit on the quasar page it tells us how to use these here we can just wrap the component we want to animate in these transition tags so i'm just going to copy this example uh i'll paste that at the bottom of this page div and indent that we need to change these classes here to slide in right and slide out right we'll get rid of this button i'll just move our router view into there and save that let's see what's going on now and we see this warning here in the console router view can no longer be used directly inside transition or keep alive use slot props instead and it gives us an example of how to do this here so we'll copy this example i'll just paste it down here for now and i'll replace this opening transition tag with this transition tag fix the indentation and we'll just remove our old router view and transition let's save that and see how it's looking reload and go to the child page and it's already kind of working our body is sliding in no problem however we can't see the header sliding in so i've found that we can fix this by adding a z-index to the page component so i'm going to jump to the css file source css app.scss and to our page div we'll add a z-index of let's try 2000 and save that and that's looking better now however now we can't see our footer so let's give our footer a higher z-index than that so i'll add a section called layout here and we'll target the q footer give that a z index of 3000 and save that and we can now see our footer again and we now have this beautiful transition so there are going to be two more videos where we finish this ios style app and in the next video we're going to add some back buttons to our header so that we can get back to the parent page we're going to add this beautiful parallax effect where the parent page slides over to the left slightly and goes darker you see that happening there i'm also going to add a grandchild page i'm going to add a new section to this app this questions section as well and we'll find that when we do that we start to see page transitions that we don't want to see so when we go from section to section we don't want to see pages sliding around what we will do when we initially add this second section so we're going to fix that and we're also going to get our app to remember where we were so that if we're in the home section we go right down to this grandchild page and we jump to the questions section and jump back to the home section then we go right back to the child page which we were on instead of going back to the root of that section i'll also be sharing the source code for this in the final video so not the next video but the one after uh let me know in the comments if you would have done any of this stuff differently uh check out the full playlist in the description please hover over my face and click subscribe if you don't want to miss any of the videos in this series thanks for watching and i'll see you in the next [Music] one you

Channel: Make Apps with Danny

Views: 2,814

Keywords: android, app design, app development, app development process, app ideas, building an app, cordova, create a real world app, create an app, creating an app, css, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, quasar, quasar framework, real app, real world app, successful app launch, vue, vue 3, vue.js, vuejs, windows, ios page transitions, page transitions, swipe to go back

Id: gwFr15NKWko

Length: 49min 20sec (2960 seconds)

Published: Wed Jun 16 2021