Skip to main content

Developer notes

There are multiple things that will change in the future. This document will be updated as we go along.

Testable pages & resources​

At this time of writing, not all menu items are working yet. A lof of them will throw a 404, however the resources should already be working as a MVP (UserResource, MailTemplateResource etc.).

PrimeVue​

The https://primevue.org/ component library is used. This is maintained by PrimeTek. This is, unlike Quasar, not a full framework. For this reason, several things needed to be built from scratch.

Recently, PrimeTek also released https://tailwind.primevue.org/. This is still very new, and the plan is to switch to it later on. More on this below.

Theming​

Tailwind​

Since we're not using the tailwind version of PrimeVue yet, the preflight in disabled in tailwind.config.js:

module.exports = {
    corePlugins: {
        preflight: false // Having a preflight will conflict with primevue
    },
    // ...

Enabling preflight will conflict with some default styles of PrimeVue.

For this reason, there exists some helper classes like bg-primary, text-primary etc. until it will be switched to the tailwind version of PrimeVue.

Themes & Dark mode​

In the TopBar (top right corner) you can switch between different themes. The position of this switcher is temporary.

The themes exist in public/themes, however it is important to note that PrimeVue will do major changes in 2024 Q1: https://primevue.org/theming/#architecture. Right now, there is barely any use of CSS variables, so until they change it there is no point to implement full theming support (like colors from preferences).

The themes are open source and can be downloaded here: https://github.com/primefaces/primevue/tree/master/public/themes

External dependencies​

The following dependencies are used Inside Qore

{
    "@ckeditor/ckeditor5-build-classic": "^41.1.0", // Ckeditor (for Wysiwyg field)
    "@ckeditor/ckeditor5-vue": "^5.1.0", // Ckeditor vue wrapper
    "@vueuse/core": "^10.7.0", // Helper methods
    "@vueuse/integrations": "^10.7.0", // Helper methods
    "axios": "^1.6.2", // Http requests
    "change-case": "^4", // String manipulation (like camelCase helpers)
    "material-icons": "^1.13.12", // Material icons
    "pinia": "^2.1.7", // State management
    "pinia-plugin-persistedstate": "^3.2.0", // Storing state in localstorage
    "primeicons": "^6.0.1", // PrimeVue icons
    "primevue": "^3", // PrimeVue component library
    "prismjs": "^1.29.0", // Code editor (for Code field)
    "quill": "^1.3.7", // Quill editor (for SimpleEditor field)
    "uuid": "^9.0.1", // Uuid generator
    "vue": "^3.3.4", // Vue3
    "vue-i18n": "9", // Internationalization
    "vue-prism-editor": "^2.0.0-alpha.2", // Code editor vue wrapper
    "vue-router": "^4.2.5" // Routing
}