Todo App Backend Template
Vue — Schema, API & AI Guide

Key Takeaways

Overview

A Todo app is one of the most common starting points for learning backend development. Under the hood it needs user registration, task CRUD, ownership-based access control, and optionally real-time sync.

The schema below defines two classes — _User (built-in) and Todo — connected by a Pointer. With the Back4app Vue SDK, you can interact with this backend from your app — querying, creating, updating, and deleting objects — without writing a custom API layer.

Why Build Your Vue Todo Backend with Back4app?

Back4app pairs with Vue 3 so you can focus on reactivity and composition without building a backend.

• •Pinia and the SDK: Use the Back4app JavaScript SDK inside Pinia stores; fetch and mutate with async/await and keep state reactive.
• •Auth out of the box: Parse.User.login() and signUp() give you session tokens; the backend returns only the current user's todos.
• •Composition-friendly: Same SDK works in setup() or Pinia; fits the Vue 3 composition API and TypeScript.

Ideal for Vue 3 developers using Pinia and the composition API.

Core Benefits

A production-ready Todo backend so you can ship faster and focus on your app.

Technical Stack

Everything powering this Todo app template at a glance.

ER Diagram

Entity-Relationship diagram for the Vue Todo app data model.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

Integration Flow

Auth-to-CRUD sequence: how your Vue app talks to Back4app — login, then query and create todos.

sequenceDiagram
  participant User
  participant App as Vue App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: List of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>User: Updated list

Data Dictionary

Complete field reference for every class in the schema.

Security & Permissions

How ownership, ACLs, and class-level permissions protect data in this schema.

Schema (JSON)

Raw JSON schema definition — copy and use in your Back4app app or import via the API.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API Playground

Try the REST and GraphQL endpoints for the Todo schema. Responses from the example data above — no Back4app account needed.

Uses the same Todo schema as this template.

Step-by-Step Vue Integration

Connect to your Back4app backend from a Vue app using the Back4app Vue SDK.

1. Step 1: Install Back4app Vue SDK

   Add the Back4app SDK for your stack (e.g. npm, pubspec, or package manager).

   Bash

   Copy

   1

   npm install parse pinia

2. Step 2: Initialize Back4app in your app

   Initialize the Back4app SDK at app startup with your App ID and server URL.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   // main.ts
   import { createApp } from 'vue';
   import { createPinia } from 'pinia';
   import Parse from 'parse';
   import App from './App.vue';
   
   Parse.initialize(
     import.meta.env.VITE_PARSE_APP_ID,
     import.meta.env.VITE_PARSE_JS_KEY,
     { serverURL: 'https://parseapi.back4app.com' }
   );
   Parse.serverURL = 'https://parseapi.back4app.com';
   
   createApp(App).use(createPinia()).mount('#app');

3. Step 3: Query all todos

   Use the SDK to fetch all Todo objects, sorted by priority.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   // In component or store
   async function getTodos() {
     const query = new Parse.Query('Todo');
     query.ascending('priority');
     return await query.find();
   }

4. Step 4: Create a todo

   Create a new Todo with title, done, and priority, then save.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   async function createTodo(title: string, priority = 3) {
     const Todo = Parse.Object.extend('Todo');
     const todo = new Todo();
     todo.set('title', title);
     todo.set('done', false);
     todo.set('priority', priority);
     await todo.save();
     return todo;
   }

5. Step 5: Update and delete todos

   Update fields and save, or delete the object.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   async function markDone(objectId: string) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     todo.set('done', true);
     await todo.save();
   }
   async function deleteTodo(objectId: string) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     await todo.destroy();
   }

Full Data Model

Copy a complete Todo model for type-safe serialization (e.g. class, interface, or type definition).

// types/todo.ts
interface Todo {
  objectId?: string;
  title: string;
  done: boolean;
  dueDate?: string;
  priority: number;
  owner?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

function toTodo(obj: Parse.Object): Todo {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner'),
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Frequently Asked Questions

Common questions about the Todo app backend template.