Quasar - Adding necessary VS Plugins & Creating components
In my previous post, I talked about how to create a project with Quasar Framework.
In this post, I'll explain how to create a component & how to use custom fonts when you are using Quasar framework.
Necessary Plugins
quasar.dev recommends installing following plugins.
I also recommend installing Vue VSCode Snippets
plugin.
And, I would also suggest adding Quasar Snippets
plugin.
Now that our VS Code is all set, let's talk about some development.
Creating Components
By default, you'll find following two components in your project, if you've created the project using the steps defined here.
Creating a custom Button Component
Let's say, we want to create a custom-rounded-reusable-button component.
Here is the reference image.
It's actually for Sign In Now
with HiveAuth purpose.
Step 1. Add a file called PrimaryButton.vue
under src/components
directory.
Step 2. Type vbase
and see the popup from snippet plugin.
Step 3. Hit tab & it will generate code for you as follows.
<template>
<div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup () {
return {}
}
})
</script>
<style scoped>
</style>
Step 4. Update it to as follows to make it like the desired button as shown in the screenshot above.
- I've added
label
andto
property which are dynamic properties defined as incoming property. So, wherever you use this button component, you can supplylabel
&to
values. rounded
will give the roundness,no-caps
will avoid all caps,to
will perform the navigation like router-link,replace
will perform navigation by replacing current route.
<template>
<div class="row" style="margin-bottom: 15px">
<div class="col-1"></div>
<q-btn
class="col"
color="primary"
rounded
no-caps
:label="label"
replace
:to="to"
/>
<div class="col-1"></div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: ['label', 'to'],
setup() {
return {};
},
});
</script>
<style scoped></style>
How to use this custom component - button?
Step 1. Open any page in which you want to add this button.
Step 2. Import component.
import { defineComponent } from 'vue';
import PrimaryButton from 'src/components/PrimaryButton.vue';
Step 3. Define the component's name that you're going to use.
export default defineComponent({
components: {
PrimaryButton, // THIS LINE
},
data() {
return {};
},
setup() {
return {};
},
});
Step 4. Use it in the XHTML
<template>
<div>
<div class="absolute-bottom col">
<PrimaryButton label="Log Into Your Account" to="/login" />
</div>
</div>
</template>
That's it, you've just created a custom component & used it in a screen/page.
Support me
Please 🙏 | Support Me |
---|---|
Vote me as Hive Witness | Donate Hive Or HBD |
This post has been manually curated by @bhattg from Indiaunited community. Join us on our Discord Server.
Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.
Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.
100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited..
This post received an extra 5.06% vote for delegating HP / holding IUC tokens.
Thank you @bhattg & @indiaunited for the curation.
Yay! 🤗
Your content has been boosted with Ecency Points, by @sagarkothari88.
Use Ecency daily to boost your growth on platform!
Support Ecency
Vote for new Proposal
Delegate HP and earn more
Thank you @ecency for curation & the boost.
The Hive.Pizza team manually curated this post.
$PIZZA slices delivered:
@sagarkothari88(1/5) tipped @barski
Please vote for pizza.witness!
Thank you so much for the curation @pizzabot
It's a dark forest for me, but I'm fascinated when people create digital things that work :)
!LOLZ
!CTP
Believe me, last week, it was dark forest for me too.
I purchased a course from Udemy & putting daily 3-4 hours to learn as much as possible.
It's not easy journey. I hope that I'll be able to build something useful for hive with this new skill set.
Thank you for stopping by & checking my blog.
!LUV
!PIZZA
!MEME
!GIF Thank you
Via Tenor
@barski, @sagarkothari88(1/1) sent you LUV. | discord | community | HiveWiki | NFT | <>< daily
! help
(no space) to get help on Hive. InfoCredit: drpanayiothss
Earn Crypto for your Memes @ HiveMe.me!
You are a persistent person, that's commendable :)
!BEER
Thank you 🙏
@sagarkothari88 reward 50 points
Sent 50 Ecency Points to you (@barski) as suggested by @thehivemobileapp for @barski/re-sagarkothari88-202377t111126104z
How to use these Ecency Points?
Click here to do return gesture if you wish to