Vue 3 Calculator

A simple calculator application built with Vue 3, TypeScript, and Vite.

Features

• Keyboard input support
• Basic arithmetic operations (+, −, ×, ÷)
• Expression formatting and result display
• Styled with SCSS and CSS custom properties

Project Structure

src/
  App.vue                # Root Vue component
  main.ts                # App entry point
  assets/
    styles/              # SCSS styles (root variables, reboot, main)
  components/
    calculator/
      components/
        ActionBtn.vue    # Calculator button component
      scenes/
        TheCalculator.vue # Main calculator UI
      services/
        useCalculator.ts # Calculator logic (state, operations)
        useKeyboard.ts   # Keyboard event handling
    shared/
      AppLayout.vue      # App layout (header, footer, slot for content)
  shims-vue.d.ts         # Vue SFC TypeScript shim
  vite-env.d.ts          # Vite environment types

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm

Install dependencies

npm install

Run the development server

npm run dev

Build for production

npm run build

Lint and format

npm run lint
npm run format

Customization

• Environment variables can be set in .env files (see .env.example).
• SCSS variables for theming are in src/assets/styles/_root.scss.

License

MIT License