# nextcloud/tasks architecture

> Architecture diagram of the GitHub repository nextcloud/tasks, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nextcloud/tasks
- Repository: https://github.com/nextcloud/tasks

## Overview

Nextcloud Tasks is a web task manager backed by calendars and CalDAV, with desktop/mobile sync clients as documented consumers. The principal workflow loads calendars and tasks into the Vuex store, presents calendar and smart-collection views, and writes task changes back through CalDAV. Users can edit task properties, organize subtasks, drag tasks between calendars, manage alarms and recurrence, and use upcoming-task dashboard integration. PHP routes and services provide collection visibility and settings. Some frontend subsystem wiring is inferred from the documented product scope and tree; only sampled call paths are linked.

Main entry points: [`src/App.vue`](https://github.com/nextcloud/tasks/blob/main/src/App.vue) (App shell), [`src/store/tasks.js`](https://github.com/nextcloud/tasks/blob/main/src/store/tasks.js) (Task state/actions), [`src/store/store.js`](https://github.com/nextcloud/tasks/blob/main/src/store/store.js) (Vuex store), [`src/services/cdav.js`](https://github.com/nextcloud/tasks/blob/main/src/services/cdav.js) (CalDAV client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application entry"]
  node_main["Vue app bootstrap<br/>[main.js]"]
  node_appvue["App shell<br/>[App.vue]"]
end

subgraph group_taskflow["Task experience"]
  node_navigation["Calendar navigation<br/>[AppNavigation.vue]"]
  node_views["Task views"]
  node_taskui["Task editing UI<br/>[TaskBody.vue]"]
  node_bulkcreate["Bulk task creation"]
  node_dashboard["Upcoming widget<br/>[TasksWidget.php]"]
end

subgraph group_sync["Calendar sync"]
  node_store["Vuex store<br/>[store.js]"]
  node_tasks["Task state/actions<br/>[tasks.js]"]
  node_calendars["Calendar state<br/>[calendars.js]"]
  node_cdav["CalDAV client<br/>[cdav.js]"]
  node_cdavreq["CalDAV requests<br/>[cdav-requests.js]"]
  node_taskmodel["Task model<br/>[task.js]"]
end

subgraph group_server["Nextcloud services"]
  node_routes["Page/API routes<br/>[routes.php]"]
  node_page["Page controller<br/>[PageController.php]"]
  node_settingsctrl["Settings API"]
  node_settingssvc["Settings service"]
  node_collectionctrl["Collections API"]
  node_collectionsvc["Collections service"]
  node_config[("User configuration")]
end

node_user(("Nextcloud user"))
node_clients(("CalDAV clients"))
node_nextcloud["Nextcloud platform"]

node_user -->|"opens app"| node_main
node_main -->|"mounts"| node_appvue
node_appvue -->|"dispatches loads"| node_store
node_appvue -->|"connects"| node_cdav
node_appvue -->|"loads calendars"| node_calendars
node_appvue -->|"loads tasks"| node_tasks
node_appvue -->|"renders"| node_navigation
node_appvue -->|"routes views"| node_views
node_user -->|"edits tasks"| node_taskui
node_taskui -->|"dispatches actions"| node_store
node_bulkcreate -->|"creates tasks"| node_tasks
node_store -->|"dispatches"| node_tasks
node_store -->|"dispatches"| node_calendars
node_tasks -->|"constructs"| node_taskmodel
node_tasks -->|"queries tasks"| node_cdavreq
node_tasks -->|"updates and deletes"| node_cdav
node_cdav -->|"syncs task data"| node_clients
node_clients -->|"syncs task data"| node_cdav
node_routes -->|"dispatches pages"| node_page
node_page -->|"reads settings"| node_settingssvc
node_routes -->|"dispatches API"| node_settingsctrl
node_settingsctrl -->|"sets values"| node_settingssvc
node_settingssvc -->|"reads and writes"| node_config
node_routes -->|"dispatches API"| node_collectionctrl
node_collectionctrl -->|"gets and sets"| node_collectionsvc
node_nextcloud -.->|"registers widget"| node_dashboard
node_dashboard -.->|"loads widget"| node_nextcloud

click node_main "https://github.com/nextcloud/tasks/blob/main/src/main.js"
click node_appvue "https://github.com/nextcloud/tasks/blob/main/src/App.vue"
click node_routes "https://github.com/nextcloud/tasks/blob/main/appinfo/routes.php"
click node_page "https://github.com/nextcloud/tasks/blob/main/lib/Controller/PageController.php"
click node_settingsctrl "https://github.com/nextcloud/tasks/blob/main/lib/Controller/SettingsController.php"
click node_settingssvc "https://github.com/nextcloud/tasks/blob/main/lib/Service/SettingsService.php"
click node_collectionctrl "https://github.com/nextcloud/tasks/blob/main/lib/Controller/CollectionsController.php"
click node_collectionsvc "https://github.com/nextcloud/tasks/blob/main/lib/Service/CollectionsService.php"
click node_navigation "https://github.com/nextcloud/tasks/blob/main/src/views/AppNavigation.vue"
click node_views "https://github.com/nextcloud/tasks/tree/main/src/views/AppContent"
click node_taskui "https://github.com/nextcloud/tasks/blob/main/src/components/TaskBody.vue"
click node_bulkcreate "https://github.com/nextcloud/tasks/blob/main/src/components/CreateMultipleTasksDialog.vue"
click node_dashboard "https://github.com/nextcloud/tasks/blob/main/lib/Dashboard/TasksWidget.php"
click node_store "https://github.com/nextcloud/tasks/blob/main/src/store/store.js"
click node_tasks "https://github.com/nextcloud/tasks/blob/main/src/store/tasks.js"
click node_calendars "https://github.com/nextcloud/tasks/blob/main/src/store/calendars.js"
click node_cdav "https://github.com/nextcloud/tasks/blob/main/src/services/cdav.js"
click node_cdavreq "https://github.com/nextcloud/tasks/blob/main/src/store/cdav-requests.js"
click node_taskmodel "https://github.com/nextcloud/tasks/blob/main/src/models/task.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_appvue,node_user,node_clients toneBlue
class node_navigation,node_views,node_taskui,node_bulkcreate,node_dashboard toneAmber
class node_store,node_tasks,node_calendars,node_cdav,node_cdavreq,node_taskmodel toneMint
class node_routes,node_page,node_settingsctrl,node_settingssvc,node_collectionctrl,node_collectionsvc,node_config toneRose
class node_nextcloud toneIndigo
```

## Components

### Application entry

- [Vue app bootstrap](https://github.com/nextcloud/tasks/blob/main/src/main.js): `src/main.js`
- [App shell](https://github.com/nextcloud/tasks/blob/main/src/App.vue): `src/App.vue`

### Task experience

- [Calendar navigation](https://github.com/nextcloud/tasks/blob/main/src/views/AppNavigation.vue): `src/views/AppNavigation.vue`
- [Task views](https://github.com/nextcloud/tasks/tree/main/src/views/AppContent): `src/views/AppContent`
- [Task editing UI](https://github.com/nextcloud/tasks/blob/main/src/components/TaskBody.vue): `src/components/TaskBody.vue`
- [Bulk task creation](https://github.com/nextcloud/tasks/blob/main/src/components/CreateMultipleTasksDialog.vue): `src/components/CreateMultipleTasksDialog.vue`
- [Upcoming widget](https://github.com/nextcloud/tasks/blob/main/lib/Dashboard/TasksWidget.php): `lib/Dashboard/TasksWidget.php`

### Calendar sync

- [Vuex store](https://github.com/nextcloud/tasks/blob/main/src/store/store.js): `src/store/store.js`
- [Task state/actions](https://github.com/nextcloud/tasks/blob/main/src/store/tasks.js): `src/store/tasks.js`
- [Calendar state](https://github.com/nextcloud/tasks/blob/main/src/store/calendars.js): `src/store/calendars.js`
- [CalDAV client](https://github.com/nextcloud/tasks/blob/main/src/services/cdav.js): `src/services/cdav.js`
- [CalDAV requests](https://github.com/nextcloud/tasks/blob/main/src/store/cdav-requests.js): `src/store/cdav-requests.js`
- [Task model](https://github.com/nextcloud/tasks/blob/main/src/models/task.js): `src/models/task.js`

### Nextcloud services

- [Page/API routes](https://github.com/nextcloud/tasks/blob/main/appinfo/routes.php): `appinfo/routes.php`
- [Page controller](https://github.com/nextcloud/tasks/blob/main/lib/Controller/PageController.php): `lib/Controller/PageController.php`
- [Settings API](https://github.com/nextcloud/tasks/blob/main/lib/Controller/SettingsController.php): `lib/Controller/SettingsController.php`
- [Settings service](https://github.com/nextcloud/tasks/blob/main/lib/Service/SettingsService.php): `lib/Service/SettingsService.php`
- [Collections API](https://github.com/nextcloud/tasks/blob/main/lib/Controller/CollectionsController.php): `lib/Controller/CollectionsController.php`
- [Collections service](https://github.com/nextcloud/tasks/blob/main/lib/Service/CollectionsService.php): `lib/Service/CollectionsService.php`
- **User configuration**

### Other components

- **Nextcloud user**
- **CalDAV clients**
- **Nextcloud platform**

## Connections

- Nextcloud user → Vue app bootstrap: opens app
- Vue app bootstrap → App shell: mounts
- App shell → Vuex store: dispatches loads
- App shell → CalDAV client: connects
- App shell → Calendar state: loads calendars
- App shell → Task state/actions: loads tasks
- App shell → Calendar navigation: renders
- App shell → Task views: routes views
- Nextcloud user → Task editing UI: edits tasks
- Task editing UI → Vuex store: dispatches actions
- Bulk task creation → Task state/actions: creates tasks
- Vuex store → Task state/actions: dispatches
- Vuex store → Calendar state: dispatches
- Task state/actions → Task model: constructs
- Task state/actions → CalDAV requests: queries tasks
- Task state/actions → CalDAV client: updates and deletes
- CalDAV client → CalDAV clients: syncs task data
- CalDAV clients → CalDAV client: syncs task data
- Page/API routes → Page controller: dispatches pages
- Page controller → Settings service: reads settings
- Page/API routes → Settings API: dispatches API
- Settings API → Settings service: sets values
- Settings service → User configuration: reads and writes
- Page/API routes → Collections API: dispatches API
- Collections API → Collections service: gets and sets
- Nextcloud platform → Upcoming widget: registers widget
- Upcoming widget → Nextcloud platform: loads widget