├── README.md ├── index.html └── js └── app.js /README.md: -------------------------------------------------------------------------------- 1 | VueJS Invoice Template 2 | ====================== 3 | This project is a simple invoice template built with HTML, Vue 3, and Bootstrap 5. 4 | 5 | It's designed to help you easily generate dynamic invoices by adding/removing products or services, automatically calculating totals, and applying taxes. 6 | 7 | ## Features 8 | Add or remove products/services: Easily modify the invoice items. 9 | Automatic calculations: Subtotal, tax (10% default), and total are calculated in real-time. 10 | Responsive design: Works seamlessly on all devices using Bootstrap 5. 11 | Editable fields: Quickly update the product/service details, quantity, and price. 12 | 13 | Demo : https://chihebnabil.github.io/vuejs-invoice-template 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Invoice 7 | 8 | 14 | 15 | 16 |
17 |
18 |
19 |

20 | 21 | Company Logo 22 | 23 |

24 |
25 |
26 |

INVOICE

27 |

Invoice #{{invoice.number}}

28 |
29 |
30 |
31 |
32 |
33 |
34 |

From: {{invoice.from.name}}

35 |
36 |
37 |

38 | {{invoice.from.address}}
39 | {{invoice.from.details}} 40 |

41 |
42 |
43 |
44 |
45 |
46 |
47 |

To: {{invoice.to.name}}

48 |
49 |
50 |

51 | {{invoice.to.address}}
52 | {{invoice.to.details}} 53 |

54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
ServiceDescriptionHrs/QtyRate/PriceSub Total
{{p.title}}{{p.description}}{{p.qty}}${{p.price.toFixed(2)}}${{(p.qty * p.price).toFixed(2)}}
${{(newProduct.qty * newProduct.price).toFixed(2)}}
89 |
90 |
91 |
92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
Sub Total:${{getSubTotal.toFixed(2)}}
TAX ({{(invoice.taxRate * 100).toFixed(2)}}%):${{(getSubTotal * invoice.taxRate).toFixed(2)}}
Total:${{(getSubTotal + getSubTotal * invoice.taxRate).toFixed(2)}}
107 |
108 |
109 |
110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const { createApp, ref, computed } = Vue; 2 | 3 | createApp({ 4 | setup() { 5 | const invoice = ref({ 6 | number: '001', 7 | from: { name: 'Your Company', address: '123 Business St', details: 'City, Country' }, 8 | to: { name: 'Client Name', address: '456 Client Ave', details: 'Client City, Country' }, 9 | products: [ 10 | { title: 'Service 1', description: 'Description 1', qty: 1, price: 100 } 11 | ], 12 | taxRate: 0.1 13 | }); 14 | 15 | const newProduct = ref({ title: '', description: '', qty: 0, price: 0 }); 16 | 17 | const getSubTotal = computed(() => { 18 | return invoice.value.products.reduce((total, product) => { 19 | return total + (product.qty * product.price); 20 | }, 0); 21 | }); 22 | 23 | function addProduct() { 24 | if (newProduct.value.title && newProduct.value.qty > 0 && newProduct.value.price > 0) { 25 | invoice.value.products.push({ ...newProduct.value }); 26 | newProduct.value = { title: '', description: '', qty: 0, price: 0 }; 27 | } 28 | } 29 | 30 | function removeProduct(index) { 31 | invoice.value.products.splice(index, 1); 32 | } 33 | 34 | return { 35 | invoice, 36 | newProduct, 37 | getSubTotal, 38 | addProduct, 39 | removeProduct 40 | }; 41 | } 42 | }).mount('#app'); --------------------------------------------------------------------------------