Frontend - Tech Stack

Repository: finmars-platform/finmars-vue-portal and finmars-platform/finmars-portal and finmars-platform/finmars-workflow-portal

Overview

This document describes the technology stack used in the Vue Portal frontend.

Language

• JavaScript / TypeScript

Framework

• Vue 3 (main frontend framework)
• Angular.js (for finmars-platform/finmars-portal)

Build Tool

• Vite

State Management

• Pinia

Router

• Vue Router

UI / Styling

• CSS / SCSS
• TailwindCSS or UI component library (Naive UI / Element Plus / Vuetify)

API Layer

• HTTP Client: likely Axios
• Backend: Django REST Framework (from core), communication over REST/JSON

Authentication

• Keycloak (mandatory integration). Client library: keycloak-js

Environment & Config

• .env files for environment variables (e.g., VITE_*) — exact names to be confirmed

Testing

• E2E Testing: Cypress / Playwright (separate repository)

Linting & Formatting

• ESLint, Prettier — rules and configs

CI/CD

• GitHub Actions (build and deploy). Build process based on Dockerfile

Containerization

• Docker (Dockerfile)
• Docker Compose for local development — to be confirmed

Observability

• Logging and monitoring for the frontend — Sentry

License

• EUPL-1.2 (repository license)

finmars-vue-portal package.json

{
	"private": true,
	"scripts": {
		"build": "nuxt build ",
		"build:web-component": "vite build",
		"dev": "nuxt --rootDir=./v/ dev -p=3000",
		"dev-local": "NUXT_APP_BUILD_ASSETS_DIR=/realm00000/v/_nuxt/ API_HOST=http://0.0.0.0:8000 AUTH_HOST=http://0.0.0.0:8083/authorizer nuxt --rootDir=./v/ dev --host=0.0.0.0",
		"start": "PORT=8080 node .output/server/index.mjs",
		"generate": "nuxt generate",
		"preview": "nuxt preview",
		"test": "vitest",
		"coverage": "vitest run --coverage"
	},
	"author": "Finmars SCSA",
	"license": "EUPL-1.2",
	"devDependencies": {
		"@nuxt/test-utils": "^3.12.1",
		"@nuxtjs/tailwindcss": "^6.12.1",
		"@types/sanitize-html": "^2.13.0",
		"@vitest/coverage-v8": "3.2.4",
		"@vue/test-utils": "^2.4.5",
		"consola": "^3.2.0",
		"eslint": "^8.24.0",
		"eslint-plugin-vue": "^9.6.0",
		"happy-dom": "^17.0.0",
		"nuxt": "^3.11.0",
		"postcss-mixins": "^10.0.1",
		"prettier": "3.3.3",
		"sass": "1.85.1",
		"unplugin-auto-import": "^0.16.6",
		"unplugin-vue-components": "^0.25.1",
		"vite-plugin-commonjs": "^0.10.1",
		"vitest": "3.2.4"
	},
	"dependencies": {
		"@chenfengyuan/vue-qrcode": "^2.0.0",
		"@finmars/ui": "1.0.87",
		"@formbricks/js": "1.1.2",
		"@kyvg/vue3-notification": "^2.4.1",
		"@pinia/nuxt": "^0.5.1",
		"@vue/web-component-wrapper": "^1.3.0",
		"ace-builds": "^1.36.2",
		"chart.js": "^3.9.1",
		"click-outside-vue3": "^4.0.1",
		"dayjs": "^1.11.7",
		"esbuild": "^0.25.5",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-prettier": "^5.2.1",
		"floating-vue": "^5.2.2",
		"grid-layout-plus": "^1.0.6",
		"jquery": "^3.7.1",
		"jsondiffpatch": "^0.6.0",
		"jstree": "^3.3.17",
		"keycloak-js": "^21.0.1",
		"lodash": "^4.17.21",
		"pdfjs-dist": "^4.0.269",
		"pinia": "^2.0.24",
		"qrcode": "^1.5.1",
		"sanitize-html": "^2.13.1",
		"swiper": "^10.0.4",
		"vue": "^3.4.23",
		"vue-matomo": "^4.2.0",
		"vue3-ace-editor": "^2.2.2",
		"vuedraggable": "^4.1.0"
	}
}