oys/bab-app

Fork 0

Files

Patrick Toal bb3042014e

refactor: everything to nuxt.js

2026-03-19 14:30:36 -04:00

4.2 KiB

Raw Blame History

Session Handoff: Nuxt Migration — Phase 7 Complete

Date: 2026-03-19 Session Focus: Runtime verification and fix Context at Handoff: Low — all pages working in dev, ready for Phase 8

What Was Accomplished

Phase 7 — Runtime Verification & Fixes

All pages now load correctly in dev. Eight issues found and fixed:

Fix 1: QCalendar CSS not imported

Added css: ['@quasar/quasar-ui-qcalendar/dist/index.css'] to nuxt.config.ts

Fix 2: Appwrite client initialized at module load time with wrong env var pattern

app/utils/appwrite.ts used import.meta.env.NUXT_PUBLIC_* — not available in Nuxt browser context
Fix: extracted initAppwriteClient(endpoint, projectId) function, called from plugin after useRuntimeConfig()
app/plugins/appwrite.client.ts now calls useRuntimeConfig() and guards against empty config

Fix 3: `.env.local` not loaded by Nuxt 4

Nuxt 4 auto-loads .env but NOT .env.local
Fix: copied .env.local → .env (both are gitignored via .env.*)

Fix 4: `AddressbarColor` plugin missing

Added 'AddressbarColor' to Quasar plugins list in nuxt.config.ts
Added ?. guard on q.addressbarColor?.set(...) in app/layouts/default.vue

Fix 5: Static image assets not resolved in Vite

src="~/assets/oysqn_logo.png" in component props is not processed by Vite (unlike Webpack's ~ convention)
Fix: copied oysqn_logo.png, oysqn_logo_only.png, oys_lighthouse.jpg to public/
Updated 4 pages (login.vue, index.vue, signup.vue, pwreset.vue) to use /oysqn_logo.png
CSS url('~/assets/...') in <style> blocks IS handled by Vite — left unchanged

Fix 6: Quasar SCSS variables (`$primary` etc.) undefined

Old Quasar/Webpack auto-imported variables; Vite does not

Fix: added to nuxt.config.ts:

vite: {
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: '@use "quasar/src/css/variables.sass" as *\n',
      },
    },
  },
},

Affects: schedule/view.vue, LeftDrawer.vue, CalendarHeaderComponent.vue, BoatScheduleTableComponent.vue

Fix 7: `sass-embedded` missing

Added sass-embedded as dev dependency

Fix 8: PWA service worker caching stale HTML in dev

Old SW was caching HTML with empty Appwrite config
Fix: set pwa.devOptions.enabled: false in nuxt.config.ts

Current State

yarn dev — all pages load correctly
Login, schedule, admin pages verified working
Appwrite auth flow functional
QCalendar renders with correct styling

Files Changed This Session

bab-app-nuxt/nuxt.config.ts — CSS import, Vite SASS config, AddressbarColor plugin, PWA dev disabled
bab-app-nuxt/app/utils/appwrite.ts — lazy init via initAppwriteClient()
bab-app-nuxt/app/plugins/appwrite.client.ts — uses useRuntimeConfig(), guards empty config
bab-app-nuxt/app/layouts/default.vue — optional chaining on route?.meta?.title and q.addressbarColor?.set()
bab-app-nuxt/app/pages/login.vue, index.vue, signup.vue, pwreset.vue — logo src path fixed
bab-app-nuxt/public/ — added oysqn_logo.png, oysqn_logo_only.png, oys_lighthouse.jpg
bab-app-nuxt/.env — created from .env.local for Nuxt 4 dotenv loading

What NEXT Session Should Do

Phase 8 — Generate & Deploy

Update .gitea/workflows/build.yaml — current CI is for the old Quasar app:
- Remove yarn dlx @quasar/cli ext invoke @quasar/qcalendar step (Quasar CLI, not needed)
- Add cd bab-app-nuxt or set working-directory for install/build steps
- Change build command to yarn generate
- Change artifact path from dist/ to bab-app-nuxt/.output/public/
- Env vars: CI uses vars.ENV_FILE → needs to write to bab-app-nuxt/.env
Test yarn generate in bab-app-nuxt/ — verify .output/public/ is produced
Check Ansible deploy playbook — update dist path if needed

Open Questions

OPEN: Appwrite SDK deprecated API calls — migrate to v14+ signatures? (TS6387 hints in all stores)
OPEN: task/taskTags/skillTags collections — will they ever be created in bab_prod?
OPEN: Should .env.local be removed now that .env is in place, to avoid confusion?

4.2 KiB Raw Blame History