Skip to content

Updated for Vue 3 and Appwrite 1.8.0 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated for Vue 3 and Appwrite 1.8.0 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example-database/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.code-workspace
.idea
.vscode
*.suo
Expand Down
827 changes: 345 additions & 482 deletions example-database/README.md
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 0 additions & 5 deletions example-database/babel.config.js
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions example-database/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
Copy link

@coderabbitai coderabbitai bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Specify a language code in the lang attribute.

The lang attribute is empty, which can affect accessibility and SEO. Please specify an appropriate language code (e.g., lang="en" for English).

Apply this diff:

-<html lang="">
+<html lang="en">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<html lang="">
<html lang="en">
🤖 Prompt for AI Agents 
In example-database/index.html around line 2, the <html> tag has an empty lang
attribute which harms accessibility and SEO; update the tag to include the
correct language code (e.g., set lang="en" for English or another appropriate
BCP 47 code) so the root element declares the document language.

<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appwrite TO-DO List</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
8 changes: 8 additions & 0 deletions example-database/jsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
50 changes: 15 additions & 35 deletions example-database/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,23 @@
{
"name": "example-database",
"version": "0.1.0",
"name": "example-database-vue3",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"appwrite": "^1.1.0",
"core-js": "^3.6.5",
"vue": "^2.6.11"
"vue": "^3.5.22",
"appwrite": "^21"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"@vitejs/plugin-vue": "^6.0.1",
"vite": "^7.1.12",
"vite-plugin-vue-devtools": "^8.0.3"
Comment on lines +19 to +21
Copy link

@coderabbitai coderabbitai bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the Vite and related package versions.

The specified Vite version (^7.1.12) and related packages (@vitejs/plugin-vue@^6.0.1, vite-plugin-vue-devtools@^8.0.3) should be verified to ensure they exist and are compatible.

Please search for the latest stable versions to confirm:

🌐 Web query:

What are the latest stable versions of Vite, @vitejs/plugin-vue, and vite-plugin-vue-devtools as of November 2025?

💡 Result:

As of November 4, 2025:

  • Vite: 7.1.2. [1]
  • @vitejs/plugin-vue: 6.0.1. [2]
  • vite-plugin-vue-devtools: 7.6.5. [3]

Sources:
[1] npm package page for vite.
[2] npm package page for @vitejs/plugin-vue.
[3] npm package page for vite-plugin-vue-devtools.

Update package.json with correct package versions.

Vite's latest stable version is 7.1.2, not 7.1.12. @vitejs/plugin-vue is correctly specified at 6.0.1. However, vite-plugin-vue-devtools's latest stable version is 7.6.5, not 8.0.3.

Update lines 19-21 in example-database/package.json:

  • Change "vite": "^7.1.12" to "vite": "^7.1.2"
  • Change "vite-plugin-vue-devtools": "^8.0.3" to "vite-plugin-vue-devtools": "^7.6.5"
🤖 Prompt for AI Agents 
In example-database/package.json around lines 19 to 21, the package versions are
incorrect; change the "vite" dependency from "^7.1.12" to "^7.1.2" and change
"vite-plugin-vue-devtools" from "^8.0.3" to "^7.6.5" so the file specifies the
correct stable versions.

}
}
17 changes: 0 additions & 17 deletions example-database/public/index.html
View file
Open in desktop

This file was deleted.

237 changes: 117 additions & 120 deletions example-database/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,121 +1,118 @@
<template>
<div class="TaskCore">
<h1>Appwrite TO-DO List</h1>
<div v-for="data in tasks" :key="data.task">
<Task v-bind:data="data" v-on:refreshData='fetchTasks' />
</div>
<div class="newTaskForm">
<input v-model="newTask" placeholder="Add New Task">
<button v-on:click.prevent="createNewTask"><span>+</span></button>
</div>
</div>
</template>

<script>
import { appwrite } from './utils'

import Task from './components/Task'

export default {
name: 'App',
components: {
Task
},
data: function() {
return {
tasks: [],
newTask: ''
}
},
created: function() {
this.fetchTasks()
},
methods: {
createNewTask: function() {
if (this.newTask === '') { return }

let promise = appwrite.database.createDocument('CollectionID', {
task: this.newTask,
done: false,
date: new Date()
}, ['*'], ['*']);

promise.then(() => {
this.fetchTasks()
this.newTask = ''
}, function (error) {
console.log(error); // Failure
});
},
fetchTasks: function() {
let promise = appwrite.database.listDocuments('CollectionID');

promise.then((response) => {
console.log(response); // Success
this.tasks = response.documents
}, function (error) {
console.log(error); // Failure
});
}
}
}
</script>

<style>
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.TaskCore {
width: 500px;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 0px 10px black;
padding: 30px;
border-radius: 10px;
text-align: center;
max-height: 80%;
overflow-y: auto;
}

.newTaskForm input {
width: calc(100% - 40px);
width: 60%;
box-shadow: 0px 0px 10px black;
height: 40px;
border-radius: 10px;
margin: 0 auto;
line-height: 40px;
text-align: center;
font-size: 25px;
margin-top: 30px;
}

.newTaskForm button {
position: relative;
display: block;
margin: 0 auto;
margin-top: 20px;
border: none;
height: 50px;
width: 50px;
background-color: #53f85b;
border-radius: 10px;
transition: 0.5s;
}

.newTaskForm button span {
color: white;
font-size: 50px;
line-height: 30px;
}

.newTaskForm button:hover {
box-shadow: 0px 0px 10px black;
scale: 1.05;
cursor: pointer;
}
<template>
<div class="TaskCore">
<h1>Appwrite TO-DO List</h1><div v-for="data in tasks" :key="data.$id || data.task">
Copy link

@coderabbitai coderabbitai bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Potential key uniqueness issue with fallback.

The key binding uses data.$id || data.task, which could cause Vue rendering issues if multiple tasks have the same name and no $id. Since Appwrite assigns a unique $id to all documents, the fallback should never be needed.

Consider simplifying to:

-    <div v-for="data in tasks" :key="data.$id || data.task">
+    <div v-for="data in tasks" :key="data.$id">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h1>Appwrite TO-DO List</h1><div v-for="data in tasks" :key="data.$id || data.task">
<h1>Appwrite TO-DO List</h1><div v-for="data in tasks" :key="data.$id">
🤖 Prompt for AI Agents 
In example-database/src/App.vue around line 3, the v-for key uses `data.$id ||
data.task` which can produce non-unique keys if `$id` is missing and multiple
tasks share the same name; since Appwrite always provides a unique `$id`, remove
the fallback and use only `data.$id` as the key to guarantee uniqueness and
avoid rendering issues.

<Task :data="data" @refreshData="fetchTasks" />
</div>
<div class="newTaskForm">
<input v-model="newTask" placeholder="Add New Task" />
<button v-on:click.prevent="createNewTask"><span>+</span></button>
</div>
</div>
</template>

<script setup>

import { ref, onMounted } from 'vue'
import { appwrite } from './utils.js'

import Task from './components/Task.vue'
import { SECRETS } from './secrets.js'

const tasks = ref([])
const newTask = ref('')

const fetchTasks = async () => {
try {
const response = await appwrite.database.listDocuments(
SECRETS.DB.databaseId,
SECRETS.DB.tableName,
)
tasks.value = response.documents || []
} catch (error) {
console.log(error)
}
}

const createNewTask = async () => {
if (!newTask.value.trim()) return

try {
// Here we don't use a transaction for a single document creation, it could be useful mostly when multiple operations are needed (CF https://appwrite.io/docs/products/databases/transactions)
await appwrite.database.createDocument(
SECRETS.DB.databaseId,
SECRETS.DB.tableName,
'unique()',
{
task: newTask.value,
done: false,
date: new Date()
},
)
newTask.value = ''
await fetchTasks()
} catch (error) {
console.error('createNewTask error', error)
}
}

onMounted(fetchTasks)
</script>

<style>
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.TaskCore {
width: 500px;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 0px 10px black;
padding: 30px;
border-radius: 10px;
text-align: center;
max-height: 80%;
overflow-y: auto;
}

.newTaskForm input {
width: calc(100% - 40px);
width: 60%;
box-shadow: 0px 0px 10px black;
height: 40px;
border-radius: 10px;
margin: 0 auto;
line-height: 40px;
text-align: center;
font-size: 25px;
margin-top: 30px;
}

.newTaskForm button {
position: relative;
display: block;
margin: 0 auto;
margin-top: 20px;
border: none;
height: 50px;
width: 50px;
background-color: #53f85b;
border-radius: 10px;
transition: 0.5s;
}

.newTaskForm button span {
color: white;
font-size: 50px;
line-height: 30px;
}

.newTaskForm button:hover {
box-shadow: 0px 0px 10px black;
scale: 1.05;
cursor: pointer;
}
</style>
Binary file removed example-database/src/assets/logo.png
View file
Open in desktop
Binary file not shown.
Loading