Look at the Source Code.
If you are like me, you are probably a bit lazy or rather like convenience, you love coding and yet you dislike digging into other people’s code. You also don’t really read documentation in detail either, unless it’s absolutely necessary.
Or, you are also like me and not the greatest front-end developer, so you fear the unknown, especially when it comes to something so magically great like Quasar, right?
Well, I’m here to say… Stop thinking that way! Take the time to look at the Quasar source code!
Now you are most likely asking, “But, Scott why? Do I have to, really?”
Um, yes. 😁
However, before we go there to answer that question of “Why?”, let’s just jump into the deep end of the Quasar swimming pool and look at the source code!
This little tutorial is going to assume you have already have some experience with Git and a package manager like Yarn or NPM.
So, here we go…
- Download the source code via Git clone:
$ git clone https://github.com/quasarframework/quasar.git
NOTE: If you intend to work on the source code and contribute a PR or two or even more, which would be fantastic, please fork the repo first and clone your fork, so you can create PRs from there. This is a standard Github process (which basically follows Gitflow). The URL for the repo can be found here on Github, as shown below.
Another small note: This article is looking at the source code from a devland developer’s perspective and not from the perspective of someone wanting to develop the source code itself. For that, you’ll have to dig in deeper on your own. 😃
2. A folder with the name of
/quasar with some sub-folders should have been created through the git clone process. The one with Quasar’s core source code is under
/ui. Change down to that folder.
$ cd quasar/ui
3. Now run
$ yarn install or
$ npm install.
4. Once the installation is finished, type in
$ yarn dev or
$ npm run dev.
If all went well, you’ll be greeted by your browser opening up to something nice-looking like this:
Browse through this little app. It’s basically a ton of component examples used to test the Quasar code.
5. Open up your editor and start looking through the code. Two sections are of note here. The
/src and the
/dev folders. They hold the source and example code respectively.
The Quasar “Dev” Code
This section is chock full of example usages of components and is what is served, when you did
yarn start. Click into the button component under the
/dev folder. You’ll see what I mean. 😃
If you haven’t already, go to the Button component page of the app. You should see something like this.
Nice! Right? 😄
This is where you can find some inspiration for component usage. Go ahead. Peruse the app and the
/dev code some more, before we continue……
Hehehe…..I bet you already have. 😜
The Quasar “Src”(Source) Code
Now that we’ve looked at the working components and the example code, let’s dig into the “how”. How do they work? Or more appropriately, what API is a specific component giving me? Wanting to know the answer to that question makes the
/src directory the more interesting directory.
Open up the
/src directory in your editor.
One of the first things you’ll notice is the sub-directories match a lot of the topics you see listed in the docs. Components, mixins, directives, plugins, utilities (utils), etc. If you are questioning the functionality of any part of Quasar, this is where to go to find out more.
Let’s look at the QBtn component.
Click into the
/src/components directory. You’ll notice every component has its own directory too. Click into
/btn. This is the
q-btn component and its derivatives, like
Let’s dig into a component. Open up
QBtn.js in your editor. Notice the imports at the top.
As you can see, Quasar QBtn uses other components too, like
QSpinner. This is component composition at its best. Here you can also see some utilities available within Quasar, like
Next thing of interest in this section of the
QBtn component is a few lines down.
Here we see the start to the component, where the component is exported for Vue to be used. In this area, you can also see the
mixins and the
props. If you look at the mixins file
BtnMixin, you’ll be able to see all of the rest of the props too.
That’s a lot of props for “just” a button! 😄 And there is even one more with the
AlignMixin. It holds the
align prop. And the
RippleMixin which holds the
If you go to the new docs for QBtn, you’ll notice these props are all also listed in the API section there too.
Now that we are here in the source code, if any prop should raise our interest, we can use our editor to find where it’s used and more importantly, how.
Now let’s continue moving downward. Notice the
computed properties. There is only one
Continue down. Now we are getting into more of the meat of the component — the methods. Here you’ll only notice one that doesn’t have an underscore in front of it. Important to note, those methods without the underscore are intended to be the public methods. The ones with an underscore are internal methods (i.e. they shouldn’t be used externally to the component).
As you can see, there is only one public method available —
click. This method helps with the
@click event, which is QBtn’s only event.
Now go to the last section. It’s the render function for QBtn. It holds the code to build out the button and if you’ll notice the
data.on: property, it handles all the possible ways to “hit” a button (not just click, but also key events and even tap events on mobile devices). Cool huh? 😎
That’s it. As a developer, you should be able to decipher what is intended here, so, I won’t go into further detail. I’ll leave that up to you! Just know that the structure we just went through is in practically every Quasar component.
So Now — The WHY?
Hopefully, you can see why. But, to explain…these are the reasons why you should look at the source code.
- You get a bunch of working examples and code all in one place, along with the code showing you how it’s done, both from devland perspective and from the core dev team perspective. It’s like the documentation, if you will. And, if you want to play around in using Quasar, you can alter the examples and play with them. Live! And know that what you are doing is purely your own mistake, if it doesn’t work. You don’t necessarily have that advantage working on your own app.
- If you have a question about whether a component can do something or not, you can go straight to the source and get the answer. As we saw above, the concepts used in Quasar are all basic Vue concepts. If you know Vue, you know Quasar for the most part.
- If you find your own answers, it saves time for both you and the dev team and the supporters working the chat and forums to help answer questions (and my true motivation to write this article. That and Razvan always tells me to look at the source code. He’s a wise man. 😉)
With all that in mind, I’ll also leave you with this thought:
Give a man a fish, he can eat for a day. Teach a man to fish, he can eat for a lifetime!
Have fun with Quasar! 😃
If you need more information about Quasar itself, here are a few links for your consideration:
THE DOCS: https://quasar-framework.org/