Quasar Vue.js Tutorial - Getting Started

hey developers so today we're gonna look at the quasar framework which is a high-performance view Jas user interface framework has a lot of really cool features so we're gonna discuss it we're also gonna just create a quick app and I'll need your guys's help so make sure you watch all the way to the end and you'll learn all about it hey if you don't know my name is Eric I'm a full-stack software developer I'm also the author of the view Jas in action book and I'm pretty much a huge view fan but I also love angular and react too so if you like those things make sure you click on that subscribe button and like the video that really helps me out and also by the way I'm doing a view 3 composition API mini course if you go to view course tech you can learn all about it it's actually in the link in the description below if you go to WWE course tech and then if you do I'll give you a free cheat sheet and I'll let you know when this new course is out which will be a kind of a fun little course alright so quasar framework you know I got a lot requests from people wanting me to look this framework over do a tutorial on it there's a lot of interest out there so which is cool they actually do have a few video tutorials right on their homepage so if you go to quasar dev they already have a few up I haven't watched them two of them are in Spanish and one of them's in English so there's that now if you don't know what quasar is they described it in the introduction to quasar as a MIT license open source VG s based framework which allows a web developer to quite quickly create responsive plus plus websites and what's cool about quasar and you know different than like beautify and and other like material design type frameworks is this one has a lot of cool features to create one app but then be able to deploy it as a single page app as a server-side rendered app SSR so you guys are probably familiar with next things like that like knucks like does server-side rendering or next but this one has a built in you can also deploy it as a PWA right out the box and something that you don't see too often you can create mobile apps out of it and also electron by app so you can create like basically desktop apps and mobile apps and it's really easy to do and you don't have to install a ton of plugins so to get started you can look here there's actually three different ways you can get started with quasar and they actually have a little handy dandy getting started guide here so you can either kind of just use it as like a script tag inside you're inside an app already um and you can certainly do that so we're like you can just throw a view J s tag in any sort of HTML file and add view to your app to your website you can also use the quasar CLI which I'm going to show you guys later how to use and then you can also use view CLI three plugins so it seems like there is some advantages and disadvantages of all three of these like for example view CLI three plug-in it says you can build SSR and electron ops but there's a little star next to it and if you read this it says that they're not tightly integrated with quasar as much as the quasar CLI and this so you may have some issues so that kind of makes me think that if I really wanted the full features a quasar I probably should just use the CLI and the CLI is like basically using the view CLI you create everything using the CLI and it sets everything up for you and it has some powerful features and it it has ways you can like quickly get your electron app up and running or create a spa up and running or create a a SSR version up and running our PWA so I think that's the best way to go if you're just looking to use some of the other cool like quasar components sort of like if you're gonna use it more like using beautify so you're just looking at the neat layout and grids and the view components then you know it's probably fine to use the view seal life with view CLI with with the plugins but it looks like if you want the full power the quasar CLI is the way to go although I mean if you've used quasar I'd love to hear if anybody's used quasar leave a comment below let me know how you guys liked it and if you've ran into any problems using it and if you've used it with view CLI or did use the quasar CLI I'd love to hear that so you see here there's tons of different components that come built into it like carousels banners badges it also has its own a bunch of its CSS type CSS tags classes that are built in that you can use if sort of feels like using tailwind that way you can actually do your whole layout it says flex course built-in so you can use like column just put dots eol as your class names and you can really easy create your own columns and then they have a layout builder if you even want to you know create your whole layout here and then export it out which i think is funny there's there's just tons of different layouts and grits and we'll take a look at it a little bit of that so let's start with this view the quasar CLI which i think is probably the easiest way to go and what i'm gonna do in this demo is we're just gonna kind of get used to installing quasar kind of taking a look at some of the components but i'm really want to make this a multi series multiple videos I don't need your help with what video I should do next so this will be as sort of an introduction but if you guys really like this I want to make it another video and we're going to deep dive into into more of this because there's there's so much to quasar like this this video could easily be like three hours long but I want to keep it much much shorter for you guys so to install the CLI it's if you go to the getting started quasar CLI and you just need to use NPM install tak G quasar CLI so something like this my keyboards a little quick clicky so I apologize in advance NPM salt tak G and then inque's our CLI like that and that'll install it and then you can use quasar create and a project so let's go ahead and do that so I have Visual Studio code open here and just have the open terminal so quasar crate and where's our demo you can see here it'll open up this installer here and it's going to ask us a few questions like what do you want to call it demo project description author of course it's me you can choose between sass is asked with CSS or stylus and I know this is fine s CSS and then you can auto import and use quizzer components and directories slightly higher compile time next to minimize bundle size most convenient many us manually specifies what to import import everything side I just take the recommended one auto import in using quasar components directives you can do that inside the configuration file I'll show you guys how to do that and then it asks you what features I mean this looks pretty similar to view CLI three do I want ya slinb UX I don't know maybe I'll do view X and Axios I'll leave off ie11 support for now and internationalization and ask me what kind of slim print sent presets I like Anna I like prettier so I'm just set that and this is kind of neat you can actually create Cordova apps so your quasar and it even asks you when you build it like what do you want the capacitor ID to be I'm just gonna leave it default for now and then asks you do you want to use yarn and PM or I'll handle that myself I'll just use yarn and then this will just take a few months and it's going to create the directory structure for us and we'll take a look cool all right so it looks like everything is up and running installed so we go to change directory choice our demo and then one quasar - Deb because I already have the quasar CLI installed and that'll go ahead and just run everything up and and actually I believe it it opens up a chrome window or your web browser window depends on what your default is and it should open up here in one second cool here it is so this is what you get out of the box and just this kind of gives you a links here to the demo of the documents disk or channel so if you need some help jump on this core Channel forums Twitter I mean there's so many things that quasars is doing and it has this little option here to close and open it so if you look at the quiz our CLI installation that's it mentions to you about how to install it and I just want to mention one thing too if you go into the playground under getting started so if you want to follow along at home I highly recommend click on the code sandbox link which I shouldn't make everything a little bit bigger yeah you click on the code sandbox link and that'll open up the code sandbox and it has the full IDE there you can then go in and and just play around with it and so that way you don't have to install the CLI and install everything just to kind of follow along with this demo that I'm doing today so yeah make sure you you know check out the code sandbox so let's take a look at our directory that it created so here's the quasar demo so you see here I have a source folder and in the source folder I have our CSS which we chose SDS CSS and here is our variable so this is kind of the look and feel that comes out of the box so here's the primary secondary accent positive negative info warning a good thing I like to do is if you go into the official documentation and go into styles and a style and identity there's actually a theme builder so if you want to kind of add in your own look look and feels you can change the primary change it to gray maybe you want the secondary color to look you know maybe you want it more red so once you kind of figure out like the color scheme that you want with all your positives because you'll be using anytime you use these CSS classes or you create you add your own buttons you'll have these color schemes you click export here and it gives you all the number all the hex for it so you can just copy and paste this directly in to your CSS quasar variables so you do it basically overwrite these with the ones you get from your theme builder and that's what I always like to do soon as I start I always change the default look the default colors because I want my own colors and yeah I just grab them out of here which would be this nice ESS I'm not gonna do that right now but that's something new I would recommend to start off with then this is where you usually keep your components and the components this has a default layout this is the layout here with the toolbar that we had at the top the drawer that's the word I was looking for earlier like this is the drawer to open close it and I have this cue list so there's a bunch of different custom components that are built in now if you look at the will kind of skip forward here if you look at the quasar conf Jas this is the default look and feel of it and let me see here if I I have prettier it actually tells me we might get these squiggly lines because I'm using Visual Studio code actually before this demo I didn't change it if you go into vs configuration and you look at the standard es lint rules it tells you what you should turn on if you use prettier es lint rules and what plugins to install I didn't do this so we might have okay there goes actually I have it defaults to single quotes but I have my prettier setup for double quotes so when I saved it it will auto formatted everything for me but if I wanted to to set up the right way I would probably go in here and and do this so this is the way to set up like the auto fix on save language prettier eslint default for matter anyways one thing to look for inside this quasar comm file if you look at the top here let's see here if we look in I think there is a section for what we have installed yet components directives plugins so if we wanted to have certain plugins or directives we would go ahead and add them inside there which we could do which we'll do later okay so we can have these pages here pages are basically just normal components that we can have you can hold a lot of information inside them if you want it depends on how you want to set up your app if you go to the router file you can see inside the router file here the these this is how we set up our routes so it's pretty normal this is actually using lazy loaded routes and you can see here's the children so let's say we wanted to create another child so we can easily do something like this just grab this copy it and then instead of having it pass equal there we'll do path I don't know slash Eric and we'll make a pages called Eric dot view and let's go ahead and create that page so I'm going to create a new file Eric view and we'll do a V base here just doing a ch3 hello from Eric we'll save it and we'll look at our quasar framework here so if we do /eric there it is hello from Eric so perfect then we could also like I said we have our router which we have this index route I wouldn't even change but if you look at the routes this is where the routes is and then we have static files we can add in here and then I added the view X store which it goes ahead and gives you some of module examples of how to get modules installed so we're not going to look at that so in our pages here are Eric dot view um let's see if we can add in some examples from our code here so I'm just going to add a couple in to take a look at it so first thing is we can probably look at let's look at a component so let's take a look at a banner so fortunately a critic could not go through dismiss so you can create banners like this and one thing I like to do when I'm just testing stuff out I just click here and just copy and paste some of the code so here is a banner right here so I'm gonna just add it in here and see what happens so I'm gonna look back here chords are yeah here's our banner dismiss update credit card um pretty neat we can even open it up in github if we want or look at the code pen of it here's one that says you have loss internet connection so if we look at all three I guess I can add all three of them in here let's take a look here I'll just leave it all three here and I'll save it oh cool so yeah it looks actly like it does an example here so I can kind of play around with it one thing you might need to do so if you go into like chip here and you look at the installation sometimes you'll need to actually add the component so like here's his components cue chip so do that what I do is go into that config file that quasar Kampf and then go into that components again and then you just add it in there like this and then once it's in there you should be able to use it so if we go back to here here's a chip example let's just copy and paste in the code in here do that go back to our Eric view and let's just put it right under this one let's do this and quasar up cool so here's our chip seems to be working okay you can see here the the way works by the way this qpa mdq gutter md this is all the built-in classes to do the layout and formatting it sort of looks like tailwind CSS might even be running some tailwind CSS underneath but it has this cue - that's definitely not tailwind and then use this cue - chip to do everything by the way I got a lot of squeaking lines here it's just a weird issue with yes lint which I'll have to configure in my next video but for now you can get the idea directions bookmarks emails okay so we got all our chips in here hello from Eric let's take a look at one more let's take a look at some of the buttons that we can get with it once again make sure I have a cue button installed here so I'll go back to my comp file and I'll add the chips I'll add in cue button and then I'll just try out some of these buttons here this is where the colors come in mind that we had set up earlier so we'll go back to my Eric view and I can just paste them right here and if I take a look here now I have if it gives me an error might be let's see what's doing oops site can't be loaded let's see here invalid selector let's take a look what we are missing here cute button well this control see it and restart it okay I actually just stopped and restarted the server cool now we have all our buttons at the bottom they all seem to work let's take a look at for this video we're gonna end it here but I'm going to show you real quickly one thing you can do if you look at the official documentation you scroll all the way the bottom you can actually let me see here I believe it's actually not at the bottom when we work where's our CLI deploying here it is so you can deploy as a spa so when we do quasar da da dev we're just running it as a single page application and then one way you can tell so if I look at this view source here I just have this normal HTML and then I have this div ID cue app and this is where it's getting bootstrap doll and the source it's running the JavaScript and adding everything but if we wanted to run it differently we can look at the official documentation and if you go to developing SSR is that's a single server-side rendered you can actually deploy it using SSR so configuring it so essentially if we just want to test it we can just do quasar dev Mssr so if I clear this and I run it now it's going to run it in SSR mode and it's gonna do everything for us and it's actually if you look over here to close these it creates a new SSR source folder where it kind of has some configuration inside of it and see now it's opened in SSR mode which Ike if I go to Eric here here's the information this is just the different components we were testing out if you look at inspect here actually view source you can see now it has all the details so basically it sent this all down on the initial load so it's much quicker because it's it has all that server-side rendered goodness built right in so that's one of the cool things about using quasar is that just with one simple command we can go ahead and set up for SSR mode and we could even if we wanted to that was just configuring it but we could just build it for SSR mode as well if we like want to do that so that's all I'm gonna show you today that was just a few components I want to see and hear from you guys what tell me what sort of components you want me to do in the future what features are you guys interested in I'll do a my next video I'll create a small little app using quasar and then I'll show you how I can connect to like a third party API and then display the information in like a table or or using some one of these quasar components because there is so many maybe we even use a directive to like to have a carousel they have their own image so you can set your images they have like lists so you can easily set different lists they have a markup table so yeah so there's so many different things I'd love to hear what you guys want me to do next if not stay tuned and I will go ahead and show you guys a little bit more in the next video thanks

Channel: Program With Erik

Views: 43,339

Keywords: quasar vue, vue quasar, quasar framework vue, quasar framework for vue.js, quasar framework tutorial, vue quasar tutorial, quasar vue basics, quasar tutorial, andre madarang, drehimself, quasar vue components, quasar vue pwa, quasar vue electron, quasar vue ssr, quasar vue cordova, vue framework, quasar vue axios, vue reddit clone, Program With erik, Program With Erik, Erik Hanchett

Id: C-v262YhYvw

Length: 22min 48sec (1368 seconds)

Published: Wed Oct 30 2019