Skip to content

Build an ideas tracker with Vue.js

6

Create table

In Appwrite, data is stored as a table of rows. Create a table in the Appwrite Console to store our ideas.

Create project screen

Create project screen

Create a new table with the following columns:

FieldTypeRequired
userId
String
Yes
title
String
Yes
description
String
No

Ideas context

Now that you have a table to hold ideas, we can read and write to it from our app. Like we did with the user data, we will create a store hold our ideas. Create a new file src/lib/stores/ideas.js and add the following code to it.

Web
import { ID, Query } from "appwrite";
import { databases } from "../appwrite";
import { reactive } from "vue";

export const IDEAS_DATABASE_ID = "<YOUR_DATABASE_ID>"; // Replace with your database ID
export const IDEAS_TABLE_ID = "<YOUR_TABLE_ID>"; // Replace with your table ID

export const ideas = reactive({
  current: [],
  async init() {
    const response = await tablesDB.listRows(
      IDEAS_DATABASE_ID,
      IDEAS_TABLE_ID,
      [Query.orderDesc("$createdAt"), Query.limit(10)]
    );
    this.current = response.rows;
  },
  async add(idea) {
    const response = await tablesDB.createRow(
      IDEAS_DATABASE_ID,
      IDEAS_TABLE_ID,
      ID.unique(),
      idea
    );
    this.current = [response, ...this.current].slice(0, 10);
  },
  async remove(id) {
    await tablesDB.deleteRow({
      databaseId: IDEAS_DATABASE_ID,
      tableId: IDEAS_TABLE_ID,
      rowId: id
    });
    this.current = this.current.filter((idea) => idea.$id !== id);
    await this.init(); // Refetch ideas to ensure we have 10 items
  },
});

Note the init function, which uses Query to fetch the last 10 ideas from the database. We will call this function when the app starts to ensure we have some data to display.