I think you're going to love the flexibility that Quasar gives you when creating a new app. Now, Quasar supports NPM, Yarn, PNPM, and Bun. In this video, we're going to be using Yarn. Yarn, create, Quasar.
But if you wanted to use a different package manager, you can replace Yarn here with the name of your package manager. So let's go ahead and run that. And then it's going to ask us a few questions. What would we like to build?
An app with Quasar CLI. What's the project folder? How about Quasar-Playground? And we can pick a Quasar version as well.
So Quasar has really good backwards compatibility. It still works very well with Vue 2. But in this video, we're going to be using Quasar version 2, which uses Vue 3 under the hood. If you like, you can choose TypeScript here.
However, to reach a larger audience, we're going to pick JavaScript for our type of project. And then we have an option of the CLI variants. So Quasar supports Vite and Webpack, and it's currently in the process of moving to Vite 5. By the time you watch this video, Vite 5 is probably stable.
So let's go ahead and choose Vite 5. For the package name, I'm just going to leave that as Quasar Playground. For the project product name, how about just Quasar Space Playground? Description, how about a beautiful place?
filled with components. Author, I'm going to leave that as myself. And now we get to choose a component style. You're almost certainly going to want composition API with script setup.
However, you can also choose composition API without script setup. That's what this option is. Or options API. So I'm going to select the first option there.
And we can choose a CSS preprocessor. I'm going to leave that as SAS. If you don't want to use SAS, you can go ahead and select none there. So we'll select SAS.
And now we get to choose the extra bits and pieces. We definitely want to use ESLint. If you've never worked on a project with ESLint set up correctly, you're going to absolutely love this. It's really cool.
And we'll dive a little deeper into ESLint in the next video. So we'll select that and these other options. Now the only reason I'm choosing these other two options here is because they give us a nice example of what a Quasar boot file looks like. and we'll be looking at Quasar boot files later on in this series.
Okay, moving on. Pick an ESLAMP preset. I personally don't like Prettier. If you've used it before and you like it, you can enable Prettier, but we're going to use standard in this video.
Yes, Quasar, I would like you to install the dependencies with YARN. And when that's done, we're going to CD into the project and open it in Visual Studio Code. CD Quasar-Playground. Code dot.
And welcome to Quasar. Let's throw the editor on the right side of the screen and make a little bit more space here and we can go ahead and start playing around with some of the modes that we can run Quasar in. So let's see if we can run our project as an SPA, an SSR app, and an Electron app. And to do this, I'm going to install the Quasar CLI.
npm install-g at quasar slash CLI. And this is basically just a CLI tool that makes it easier to run quasar commands. It just means instead of saying, for example, yarn quasar, so we can do that to get the quasar CLI. But instead of doing that, we can now just say quasar.
Okay, let's run our app in SPA mode. Hey quasar, I want to develop an app. Can you please set the mode equal to SPA? Now, as it turns out, SPA is the default mode, so we can remove all of that entirely and just say Quasar Dev.
And there we go. That's the default Quasar app. We get a menu on the left here with a few essential links, and we're up and running with Quasar. So next, let's try an SSR app.
Hey, Quasar, I want to develop an app. Can you please set the mode equal to SSR? We give that a moment to run, and there's our SSR app. All right, let's try another one.
How about an Electron app? Hey Quasar, I want to develop an app. Can you please set the mode equal to Electron? Now it's going to install all dependencies that it needs to run an Electron app, which is really cool, handles all that stuff for us behind the scenes.
And there's our app running an Electron. So Electron basically allows us to build Linux, Mac, and Windows apps. Okay, closing that out, there's a couple of things that I want to show you now. If we jump into our file browser, we have two new directories here.
One of them is source electron and one of them is source SSR. Now we're still going to write most of our code, if not all of our code inside of this source directory. That's the code that will be common between all of the platforms. So Quasar has done the hard work of allowing us to write all of our code in this one directory.
and then setting up development and build processes for working for all of these different platforms. However, if we have to do electron specific stuff, then we can jump into the source electron directory. And that's almost like jumping out of the quasar world or jumping out of the view world and then jumping into the electron world. Same with SSR.
If there's any SSR specific code we need to write, we can do it all in here. And I want to take a quick moment to note, we won't be covering capacitor in this video, which is what you use to build mobile apps. And that's mostly because it requires a few more bits and pieces to get up and running. So we'll cover mobile apps a little bit later on in this series, but don't worry, that's coming soon.
So to finish up, let's go ahead and create something in our app. Let's replace this image here with a button. Jumping into source, pages, index page. That's this component here.
And I might just zoom out one time. We'll start by doing a little bit of cleanup. This define option section isn't necessary. Vue is automatically going to look at the name of the component and name it index page for us.
So I'm just going to get rid of that. Let's move the script tag to the top. Just a convention that I like. And let's go ahead and replace this image with a Q dash button.
All Quasar components are prefixed with a Q dash. So this page is a Quasar component, and this button is a Quasar component. Also, we don't have to import Quasar components. They're automatically imported for us, including their typing.
So if we hover over this component, you can see that all of the types are there as well. And that just means if I did, for example, control space, we can see all of the stuff that this component can do. And I'm just going to add a label. Label is equal to Hello Quasar.
And how about we give it a color equal to red. Save it. And I stopped my server. So let's go ahead and run the server again.
This will be good practice. Quasar. Dev. And there's our button.
Now I don't really like the formatting here. I prefer to do it the quote unquote view way. So let's put all of these properties on a new line and change this to a self closing tag. Save it and it still works.
But we don't want to have to do all of that formatting ourselves every time. So in the next video, we're going to be setting up ESLint. So follow me over to the next video and I'll see you there.