Welcome to Quasar Fundamentals. You are going to love this framework. And I honestly can't wait to show you a lot of the cool stuff it can do. Now, there's no need to follow along in this first video.
It's designed to give you a quick taste of what Quasar can do. So feel free to skip this one if you'd rather just go ahead and dive right in and get started. Quasar comes with a command line tool. So if we want to start our app as an SPA, we can say, hey, Quasar, I want to develop an app.
And can you please set the mode equal to SPA. Now it turns out SPA is the default option. So if we get rid of SPA there and mode, that's going to launch our app as an SPA. And there we go.
Quasar app running with an SPA using Veep behind the scenes. So let's go ahead and look at some of the other options that we've got. We can build an SSR app. Hey Quasar, I want to develop an app.
Can you please set the mode equal to SSR? Let's go ahead and run that. And now we have an SSR app running and we're able to run the SPA app and the SSR app at the same time. How cool is that?
So Quasar does a lot of cool stuff behind the scenes to make sure we don't end up with clashes with port numbers. So you'll notice that they're using different ports so that these apps don't clash. And it means that you can develop in a whole bunch of different modes at the same time. Now let's try a desktop app.
Hey Quasar, I want to develop an app. Can you please set the mode equal to Electron? So Electron is a tool that allows you to build desktop apps. This basically means that we're covering Windows, Linux and Mac.
So Electron allows us to build apps for all of those platforms. So if I go ahead and run that, since I'm on Ubuntu, this is going to run a Linux application and now we can develop a desktop app. And this is really cool because now we have access to a whole bunch of desktop APIs within our app. So just as a basic example, we can start working with the file system really easily.
And we can start working with different APIs that only desktop apps would allow you that you wouldn't get in a normal browser app. Okay, let's close a few of these down. And now we're going to do a mobile app. And to do mobile apps, we use Capacitor.
So hey, Quasar, I want to develop an app. And can you set the mode equal to Capacitor? And we also want to set the target here, because Capacitor allows you to build for both Android and iOS. So we say, I want you to set the target equal to Android.
And if you were on a Mac right now, you could also do iOS. All right, so we'll set that equal to Android, run that, and this is going to open Android Studio, and I'll show you how to get Android Studio installed later on in this series. So that pre-selects a phone that's already connected to my computer. And then all we have to do is press the play button to now run that app on our phone.
So I'll click on that, give it a second to run. And now we can start developing an app live on our phone. And check this out. If I open up Chrome and then jump into chrome colon slash slash inspect, and then select devices on the left here.
Let me just make this a little bit bigger so you can see. This right here is our app running on the phone. So if I select that, now we can develop our app with everything that Chrome DevTools has to offer. So we can look at individual elements.
We've got our console that we're used to. And now if I click on this button here, that's going to show up on my phone. And on my phone, if I click out of it, everything's in sync, so it shows up there as well. It's really, really easy to start building mobile apps with Quasar.
And we now have access to mobile APIs so we can access the camera. we can access Bluetooth, and Capacitor has a whole bunch of cool plugins that basically allow you to write Bluetooth code, for example, and that code will work for both Android and iOS. So you can really easily build apps for both of those platforms with one code base. It's really, really amazing, and Quasar makes it super simple to do.
Okay, so let's jump out of that, jump out of Android Studio, shut that server down. And the last mode I want to show you is a browser extension. Hey, Quasar, I want to develop an app. Can you please set the mode equal to BEX, which stands for browser extension.
So we'll go ahead and run that. And it's going to tell us where the files for that browser extension are. There that is. So if we want to do it for Chrome, we can grab the folder there.
Or if we wanted to use Firefox, we would copy this one. And now if I click on these three dots for Google Chrome, and then I select Extensions, Manage Extensions, we can then click on Load Unpacked and basically just paste that folder in. Now I've already done that, so you can see this is the app that we're working on. So we can jump up here and then click on Quasartaste, which is the name of this app.
And there's our app as a browser extension. However, there's all sorts of other cool stuff you can do with browser extensions. So for example, this is an extension that I have called Colourzilla. If I click on that and notice that we get this menu, we can do that as well using Quasar.
We can create our own menus or pop-up menus as they're called for our browser extensions. And we can even inject code into other websites. So for example, GitHub or YouTube. Or maybe you've got a Microsoft app and you want to kind of inject some code in there and enhance the experience.
There's all sorts of cool things that you can do with browser extensions. The possibilities are endless. So hopefully your brain is exploding with excitement right now. Quasar creates lots of possibilities to web developers like you and me and makes it super, super easy to get up and running, but still gives us plenty of flexibility, which you'll find out about later on in this series.
Now, closing this down. We're going to go back to an SPA. Hey, Quasar, I want to develop an app and set the mode equal to SPA. There we go.
The next thing I want you to get excited about is that Quasar is simple by default, but customizable enough to suit your needs. So let's just close out the console for a second and open up our file browser. We're going to jump into source, pages, index page, and that's basically this page that you see in the middle here. And I have a little bit of code that basically fetches some to-dos from this fake API.
So if I control click that, you can see that we just get an array of to-dos there, closing that out. And it just sets the results of that to this data ref. I'll show you what I mean. Let's replace this image with a pre-tag.
And I'm just going to whack in that data. And you can see the data there. It might go full screen so you can see it a little bit better. There it is.
Now check out how easy it is to get that data into a table with Quasar. We can come in here and say q-table, and I want to set the rows for that table equal to the data. Save it, and it's as simple as that. Now we have a table with all the columns figured out for us.
All of the data gets injected in there. We get pagination as well. And in this series, I'm going to show you how we can tap into individual cells or tap into an entire row, the pagination, basically everything that this table has to offer, we can customize. It's a very beautiful and impressive API.
And I want to make sure that we don't miss some of the cool stuff that Quasar's component library offers us out of the box. Lastly, I wanted to mention that Quasar has an awesome track record for stability. It was the first major framework to move to View 3. and it had very few breaking changes between View 2 and View 3.
So, in other words, the API is very, very stable. To wrap up on why you're going to love this series, one, you'll be able to build an app that works on Android, iOS, Mac, PC, Linux, as an SPA, PWA, SSR, or even a browser extension. That's way too many acronyms. Two, you'll have access to a world-class component library that's ridiculously easy to use, as I've shown you here with the Q table, yet customizable enough to cover your complex needs.
And three, you'll have command over a framework that has a track record of staying up to date and a strong focus on backwards compatibility. So a lot of you that have been around the block before know how important it is to have an API that isn't going to break on you in the future. Quasar is that framework. It is very well thought out and meticulously crafted.
Okay. Sound good? Sweet. Let's go ahead and get started.