@mosquitodb/mosquitodb-wrapper

A Vue 3 component library that packages the MosquitoDB API (a vector-borne disease research platform) into an installable Vue plugin — UI shell, routing, state management, and service classes — for apps that need to manage projects, experiments, sites, forms, and data queries against MosquitoDB.

Installation

npm install @mosquitodb/mosquitodb-wrapper

Peer dependencies

The consuming app must provide these — they are externalized, not bundled:

npm install vue vue-router pinia axios quasar @quasar/extras

Quasar must be installed and registered in the host app, including the Dialog plugin:

import { Quasar, Dialog } from 'quasar'
app.use(Quasar, { plugins: { Dialog } })

Don't forget the stylesheet:

import '@mosquitodb/mosquitodb-wrapper/dist/style.css'

Quick Start

import { createApp } from 'vue'
import { MosquitoDB } from '@mosquitodb/mosquitodb-wrapper'
import '@mosquitodb/mosquitodb-wrapper/dist/style.css'

const app = createApp(App)

app.use(MosquitoDB, {
  title: 'My App',
  requireProject: true,
  requireExp: true,
  ignoreWrapper: false,
  routes: [
    // your app's own routes, mounted as children of the active project/experiment
  ],
})

app.mount('#app')

MosquitoDB.install() creates and registers its own Vue Router (hash history) and Pinia instance on the app. Do not create your own router or Pinia instance — the host app receives them through the plugin and consumes them via useMRouter() / useMRoute() and the exported store composables.

Plugin Options

| Option | Type | Default | Description | |---|---|---|---| | title | string | — | App title shown in the shell header | | requireProject | boolean | false | Force a project-selection screen before any route resolves | | requireExp | boolean | false | Force an experiment-selection screen (only applies if requireProject is true) | | ignoreWrapper | boolean | false | Bypass the MosquitoDb shell entirely; mount routes directly at root | | routes | RouteRecordRaw[] | [] | Consumer's own routes, injected as children of the lastRoute named route |

Routing modes

| requireProject | requireExp | ignoreWrapper | Behaviour | |---|---|---|---| | true | true | false | Root → MosquitoDb shell → SelectProjectAndExperiment → /projects/:projectId/experiments/:expId → consumer routes | | true | false | false | Root → MosquitoDb shell → SelectProject → /projects/:projectId → consumer routes | | false | — | false | Root → MosquitoDb shell → consumer routes directly | | — | — | true | Consumer routes mounted at root, no shell |

In every shell-backed mode, consumer routes are mounted as children of a route named lastRoute.

What's Exported

Plugin

• MosquitoDB — the Vue plugin (see Quick Start)
• useMRouter(), useMRoute() — wrappers around useRouter/useRoute for use inside consumer components

Stores (Pinia)

• useAuthStore — current user, role checks (isAdmin, isSuperAdmin, isUser), password change
• useProjectStore — project list/CRUD (call findAll() to populate)
• useExperimentStore — experiment list/CRUD scoped to the active project
• useApplicationStore — navigation menu items
• usePreferenceStore — user preferences

Services

Each service wraps an axios instance and exposes findAll(filter, pagination), findOne(id), create(data), update(id, data), delete(id) (subset depending on resource):

ProjectService, ExperimentService, AuthService, SiteService, ApplicationService, SettingService, FormService, FormGroupService, FormTemplateService (alias of FormGroupTemplateService), DataQueryService, QueryExecutorService, DataFilterService, VisualizationService, BasemapService, GeoJSONService

Components

• MDataFilter, MDataFilterDialog, MDataFilterPicker — data filter builder/picker
• MDateRangePicker — date range input
• MFormSelect, MFormFieldSelect — form/form-field pickers

Composables

• useI18n() — i18n helper (English/Swahili)

Configuring the HTTP Client

Axios is configured once at app init via src/config.js's http.url (base URL) and http.timeout. All services read from the same shared axios instance, which attaches the Authorization: Bearer <token> header and shows a session-expired dialog (or falls back to window.confirm if the Quasar Dialog plugin isn't registered) on 401 responses.

State Management

The plugin owns its own Pinia instance — do not register a second one in the host app. The four stores above (useAuthStore, useProjectStore, useExperimentStore, useApplicationStore) and usePreferenceStore call into the services layer and use useQuasar().notify() for success/error toasts.

UI Framework

Built on Quasar 2.x with Material Icons. Primary brand color is #009551 (green). RTL is toggled via the QUASAR_RTL environment variable.

Development

npm run dev       # Vite dev server (entry: main.js, not src/index.js)
npm run build     # Library build → dist/ (ES + CJS bundles + style.css)
npm run preview   # Preview the production build

npm run build produces:

• dist/mosquitodb-wrapper.es.js
• dist/mosquitodb-wrapper.cjs.js
• dist/style.css

Vue, Vue Router, Pinia, Quasar, and Axios are externalized in the library build — they are not bundled into dist/.

The @ import alias resolves to src/.

Project Structure

src/
  components/   Vue components (dialogs, pickers, the MosquitoDb shell)
  views/        Route-level views (project/experiment selection, etc.)
  stores/       Pinia stores
  services/     Axios-backed API service classes
  composables/  Reusable composition functions (i18n, etc.)
  i18n/         Translation strings (English/Swahili)
  router/       Router helpers
  utils/        Shared utilities
  index.js      Public plugin API — everything exported from the package

License

Published as @mosquitodb/mosquitodb-wrapper on npm.