A Vue 3 application for calculating position sizes when trading synthetic indices. This tool helps traders determine the appropriate position size based on their account balance, risk tolerance, entry price, and stop loss level.
- Searchable Synthetic Index Selector - Easily find and select from all available synthetic indices with a searchable dropdown
- Real-time Calculations - Position size updates automatically as you input values
- Input Validation - Helpful error messages guide you to enter valid data
- Modern UI - Beautiful gradient design with faded background text decoration
- Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- Detailed Results - Shows Risk Amount, Price Risk, and Position Size with proper formatting
- Install dependencies:
npm install- Start the development server:
npm run dev- Build for production:
npm run build- Preview production build:
npm run preview- Select Synthetic Index - Choose the synthetic index you want to trade from the searchable dropdown (or type to search)
- Enter your Account Balance - Your total trading capital in dollars
- Enter Risk Per Trade - The percentage of your account you're willing to risk (e.g., 0.5, 1, 2, 5, 10, 50)
- Enter Entry Price - The price at which you plan to enter the trade
- Enter Stop Loss Price - The price at which you'll exit if the trade goes against you
The calculator will automatically compute:
- Risk Amount: The dollar amount you're risking (Account Balance × Risk Percentage)
- Price Risk: The absolute difference between entry and stop loss prices
- Position Size: The number of units you should trade (formatted to 4 decimal places)
- VIX Indices: VIX 10 1s, VIX 10, VIX 25 1s, VIX 25, VIX 50 1s, VIX 50, VIX 75 1s, VIX 75, VIX 100 1s, VIX 100, VIX 150 1s, VIX 200 1s, VIX 250 1s, VIX 300 1s
- Step Index
- Boom Indices: Boom 300, Boom 500, Boom 1000
- Crash Indices: Crash 300, Crash 500, Crash 1000
- Jump Indices: Jump 10, Jump 25, Jump 50, Jump 75, Jump 100
- Range Break Indices: Range Break 100, Range Break 200
- Vue 3 - Composition API for reactive, modern component architecture
- Vite - Fast build tool and development server
- @vueform/multiselect - Searchable dropdown component for synthetic index selection
- Modern CSS - Gradient backgrounds, animations, and responsive design
spscalc/
├── public/
│ └── favicon.png # Uptrend chart favicon
├── src/
│ ├── components/
│ │ └── PositionSizeCalculator.vue # Main calculator component
│ ├── App.vue # Root component with background decoration
│ ├── main.js # Application entry point
│ └── style.css # Global styles
├── index.html # HTML template
├── vite.config.js # Vite configuration
└── package.json # Dependencies and scripts
The app uses Vue 3's Composition API with reactive refs and computed properties for real-time calculations. Input validation ensures data integrity, and the UI provides immediate feedback through helpful error messages.
MIT