Vue 3 + Vite web application scaffolding and the PCMCrunners application.

This repository contains a Vue 3 + Vite project that was migrated from a legacy frontend and integrated with Firebase. The project uses Single File Components with <script setup>, Pinia for state management, and Vue Router.

Status

• Vue 3 app (Vite) — development ready
• Firebase (Hosting + optional Cloud Functions) present under functions/
• Pinia used for app state
• Tailwind & FontAwesome are included

Quick start

Prerequisites

• Node.js (18+ recommended)
• A package manager: pnpm is recommended (pnpm is used to create the lockfile in this repo), or npm/yarn
• (Optional) Firebase CLI for deploys: npm install -g firebase-tools

Install dependencies

:: Using pnpm (recommended)
pnpm install

:: Or using npm
npm install

Run development server

pnpm dev
:: or
npm run dev

Build for production

pnpm build
:: or
npm run build

Preview production build locally

pnpm preview
:: or
npm run preview

Deploy to Firebase Hosting

1. Login with the Firebase CLI (if not already):

firebase login

2. Deploy hosting (the repository has a convenience script):

pnpm run hosting
:: or
npm run hosting

Note: the hosting script in package.json runs firebase deploy --only hosting.

Firebase configuration

• The client-side Firebase configuration used by the frontend is located in public/config.js (legacy single-file setup). There is also src/firebaseconfig.js (Vue-friendly import) used by modern code paths — update either location with your project's apiKey, authDomain, projectId, etc.
• Server/secret keys (service accounts) are present under functions/service-account.json and util/service-account.json. Do NOT commit private service-account files for public repositories. If you deploy functions, use proper environment variables or CI secrets instead.

Project structure (high level)

• public/ — static assets and legacy app pages (some old HTML files remain)
• src/ — the Vue 3 app source
  • src/main.js — app entry
  • src/App.vue — root component
  • src/router.js — Vue Router configuration
  • src/stores/ — Pinia stores
  • src/components/ — Vue components
• functions/ — Cloud Functions (Node) and firebase-related server code
• util/ — helper scripts for migrations and service account config

Migration notes

This repository was migrated from an older Angular/vanilla frontend into Vue 3 + Vite. Key migration points:

• Pinia replaced Angular services for centralized state
• Vue Router replaces page-by-page navigation
• Firebase client initialization is now in src/firebaseconfig.js and the legacy public/config.js remains for backwards compatibility with some static pages
• Some legacy pages still live in public/ (e.g., PCMCapp.html, pcmcanim*.html) and may be progressively migrated to Vue components

If you plan a full migration, a recommended approach:

1. Start the Vue dev server and pick a single route to migrate.
2. Convert the legacy page's markup to a Vue SFC in src/components/ and wire data & events to Pinia or component state.
3. Replace direct DOM-manipulation code with reactive Vue patterns and lifecycle hooks.

Backlog / Roadmap

• PrimeVue integration for more complex UI components
• Chatbot / AI agent improvements
• Upgrade FontAwesome usage to the latest Vue integration

ag-ui (chat provider) — install & manual wiring

The project can use ag-ui (https://github.com/ag-ui-protocol/ag-ui) as a chat provider. The codebase includes a Pinia store (src/stores/chatbotStore.js) and a Chat component (src/components/Chat.vue).

To install the package locally (example):

pnpm add ag-ui
:: or
npm install ag-ui

Manual wiring (recommended): add the provider wiring to src/main.js or another initialization module. The project already contains a safe auto-wiring attempt in src/main.js which will dynamically import ag-ui at runtime if the package is present and try several common export patterns.

If ag-ui exports a different API, register a provider manually in src/main.js like this (adapt to the real API):

import { useChatbotStore } from './stores/chatbotStore'
import agClientFactory from 'ag-ui' // adapt to actual exports

const store = useChatbotStore()
const client = agClientFactory({ /* config */ })
store.registerProvider(async (messages) => {
  // call the ag-ui client and return the assistant text
  const reply = await client.send(messages)
  return reply
})

Notes:

• The dynamic import in src/main.js is non-fatal: if ag-ui is not installed the chat will still work in a limited fallback (the store echoes messages). Register a real provider for production quality responses.
• If ag-ui requires credentials or API keys, keep secrets out of the client bundle — run a backend proxy or use environment variables at build-time.

Tests & linting

This repo currently includes basic tests under test/ (see index.test.js, PCMCapp.test.js). There is no preconfigured test runner in package.json; add your preferred test framework (Vitest / Jest) if you need automated testing.

Contributing

• Please open issues for bugs or feature requests.
• For pull requests, target the master branch and include a short description of the change.

License

See LICENSE in the repository root for license details.

Contact / Maintainers

• Repository owner: avinashmane

---

If you'd like, I can:

• Convert one legacy page (for example public/PCMCapp.html + public/PCMCapp.js) into a Vue single-file component and wire it into src/router.js.
• Or produce a minimal runnable starter commit that contains only one migrated page so you can review the migration pattern.

Tell me which option you prefer and I'll proceed.

PCMCrunners

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

Features

Backlog

• Primevue
• Chatbot

History

Migration 17-Nov-2025

• Pinia
• AI agent
• Major flow checked
• Fontawesome - not upgraded
• links upgraded not to use firebase dynamic links