Simple Tip Calculator in VueJS

A Tip Calculator is a calculator that calculates a tip based on the percentage of the total bill.

Let’s build a simple Tip Calculator using VueJS

Here is the HTML

<h2> Tip Calculator </h2>
    <div class="form-group">
        <label for="name">How much is the total Bill Amount?</label>
        <input type="text" class="form-control" id="amount" placeholder="Total Bill Amount" v-model="amount">
    <div class="form-group">
        <label for="email">How was the service?</label>
        <select name="refer" class="form-control" id="percentage" v-model="percentage">
            <option value="30">30% (Exceptional)</option>
            <option value="25">25% (More than good)</option>
            <option value="20" selected>20% (Good)</option>
            <option value="15">15% (It was okay)</option>
            <option value="10">10% (Bad)</option>
            <option value="5">5% (Terrible)</option>
    <div class="form-group">
        <label for="name">How many people are sharing the bill?</label>
        <input type="number" class="form-control" id="people" placeholder="Number of people" v-model="people">
<div class="alert alert-success" role="alert">
    Tip Amount : <strong>{{tip.toFixed(2)}}</strong>

We have created three input fields, one for total Bill Amount another for the percentage of the total amount as the tip, and third for how many people are sharing the amount.

Livewire Component Library

Here is the Vue Instance that binds the properties to input fields and also a computed property that calculates the total bill amount

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

var app = new Vue({
    el: '#app',
    data: {
        amount: 0,
        percentage: 20,
        people: 1
    computed: {
            this.people = (!isNaN(this.people) && this.people > 0) ? this.people : 1; //Restrict people to not be NaN or 0
            return this.amount > 0 ? (this.amount * this.percentage / 100) / this.people : 0;  //Calculate Tip if valid bill amount

Tip Calculator Demo

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer