Quasar - Adding necessary VS Plugins & Creating components

sagarkothari88(77)

Published in

HiveDevs

Words

278

Reading

2 min

Listen

Play

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 and to property which are dynamic properties defined as incoming property. So, wherever you use this button component, you can supply label & 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>