How to create a generic button component using Vue 3
Creating a generic button component with all possible features can save time and effort while building web applications. By creating a reusable component, developers can avoid writing the same code over and over again for each button they need to add to their application. In this technical blog post, we will be discussing how to create a generic button component using Vue 3.
Setting up the Vue 3 Component
First, we need to set up the Vue 3 component. You can do this by running the following command:
npm install --save vue@next
After installing Vue 3, create a new Vue component and name it GenericButton.vue. Here is how it should look like:
<template>
<button>
{{ label }}
</button>
</template>
<script>
export default {
name: "GenericButton",
props: {
label: {
type: String,
required: true,
},
},
};
</script>
In this code, we define a template that contains a button element with a label that is passed as a prop. We also define a script that exports a Vue component with a name and a prop for the label.
Adding Properties to the Button Component
Next, we need to add properties to the button component. This can include things like the button type, the button size, and any additional classes or styles that should be applied.
<template>
<button :class="btnClass" :style="btnStyle" :type="type">
{{ label }}
</button>
</template>
<script>
export default {
name: "GenericButton",
props: {
label: {
type: String,
required: true,
},
type: {
type: String,
default: "button",
},
size: {
type: String,
default: "medium",
},
btnClass: {
type: String,
default: "",
},
btnStyle: {
type: Object,
default: () => ({}),
},
},
computed: {
buttonSize() {
switch (this.size) {
case "small":
return "py-1 px-2 text-xs";
case "medium":
return "py-2 px-4 text-sm";
case "large":
return "py-3 px-6 text-base";
default:
return "py-2 px-4 text-sm";
}
},
},
};
</script>
In this code, we define additional props for type, size, btnClass, and btnStyle. We also define a computed property for buttonSize that sets the size of the button based on the size prop.
Using the Button Component
Now that we have created the button component, we can use it throughout our application. Here is an example of how to use the button component:
<template>
<div>
<generic-button label="Submit" type="submit" size="large" btnClass="bg-blue-500 text-white" />
</div>
</template>
<script>
import GenericButton from "@/components/GenericButton.vue";
export default {
components: {
GenericButton,
},
};
</script>
In this code, we import the GenericButton component and use it with the desired properties. We can also add additional classes or styles to the button by passing in the btnClass and btnStyle props.
If you want to use Slots, here is an example
<template>
<button :class="classes" @click="onClick">
<slot />
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyButton',
props: {
variant: {
type: String,
default: 'primary',
validator: (value: string) =>
['primary', 'secondary', 'success', 'warning', 'danger'].includes(value),
},
size: {
type: String,
default: 'medium',
validator: (value: string) =>
['small', 'medium', 'large'].includes(value),
},
disabled: {
type: Boolean,
default: false,
},
},
computed: {
classes(): string {
return `btn btn-${this.variant} btn-${this.size}` +
(this.disabled ? ' disabled' : '');
},
},
methods: {
onClick(): void {
if (!this.disabled) {
this.$emit('click');
}
},
},
});
</script>
Here's how you can use the component in your templates:
<template>
<div>
<MyButton>Click me</MyButton>
<MyButton variant="secondary" size="small" :disabled="true">
Disabled button
</MyButton>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MyButton from '@/components/MyButton.vue';
export default defineComponent({
name: 'MyPage',
components: {
MyButton,
},
});
</script>
Leave a Reply