WIP
The frontend is designed as a single codebase for all platforms.
It achieves this by utilizing Nuxt 3 on top Ionic & Capacitor.
The Foundation of the app is Based on Nuxt 3, a Vue 3 Framework.
While the point of Nuxt is to create a full-stack vue app with server-side rendering, we have made ours static in order to work as a self contained mobile app as well.
This means we are mainly using Nuxt to take advantage of it’s routing, auto-import, and simplified build process.
Nuxt 3
You should familiarize yourself with the Nuxt Docs.
The routes and auth middleware are handled by Nuxt, with the pages/ folder handling the routing setup of the app.
There are a couple of nuxt modules being used for additional features:
@nuxt/ui- Various UI components and theming (Mainly the counselor table)@vueform/nuxt- The Editor Component@samk-dev/nuxt-vcalendar- Calendar UI and Picker Component@nuxtjs/ionic- Compatibility layer for Nuxt to run on Ionic
Capacitor
Capacitor is a js framework for turing a web app into mobile app. It provides components that allow you to interact with native mobile functionality through js in the webapp, as well as perform builds for ios and android.
To see how to perform a mobile build, visit Builds.
Ionic
The Ionic Framework is a set of UI components to create a native feeling mobile experience in a webapp. They are also the creators of Capacitor.
Since Ionic was added much later, it is used a bit randomly when needed.
In the future we hope to consolidate the UI more consistently.
It’s current main function is through the ion-app-router, which enables a stack navigation. When combined with ion-page & ion-content, it powers the navigation stack in our app, which enables swipe to go back on mobile.