From d63c88ffe57fcc1a626f6168074e2db29e316a8d Mon Sep 17 00:00:00 2001 From: youtch Date: Tue, 4 Nov 2025 10:46:36 +0100 Subject: [PATCH] Updated for Vue 3 and Appwrite 1.8.0 - Refactoring of this code example for Vue and Appwrite latest runtimes - Rewriting the README file according to updated JS framework and the updated backend versions, including new screenshots files - Adding .env file to appy modern good practice of credential management --- example-database/.gitignore | 1 + example-database/README.md | 827 +- example-database/babel.config.js | 5 - example-database/index.html | 13 + example-database/jsconfig.json | 8 + example-database/package.json | 50 +- example-database/public/index.html | 17 - example-database/src/App.vue | 237 +- example-database/src/assets/logo.png | Bin 6849 -> 0 bytes example-database/src/components/Task.vue | 216 +- example-database/src/main.js | 8 +- example-database/src/secrets.js | 9 + example-database/src/utils.js | 37 +- .../tutorial-resources/images/1.png | Bin 22043 -> 164384 bytes .../tutorial-resources/images/2.png | Bin 33636 -> 89610 bytes .../tutorial-resources/images/3.png | Bin 28741 -> 96061 bytes .../tutorial-resources/images/4.png | Bin 29141 -> 74384 bytes .../tutorial-resources/images/5.png | Bin 28562 -> 99405 bytes .../tutorial-resources/images/6.png | Bin 34127 -> 86566 bytes .../tutorial-resources/images/7.png | Bin 0 -> 89478 bytes .../tutorial-resources/images/8.png | Bin 0 -> 134901 bytes .../tutorial-resources/images/9.png | Bin 0 -> 22919 bytes example-database/vite.config.js | 18 + example-database/yarn.lock | 8490 ----------------- 24 files changed, 667 insertions(+), 9269 deletions(-) delete mode 100644 example-database/babel.config.js create mode 100644 example-database/index.html create mode 100644 example-database/jsconfig.json delete mode 100644 example-database/public/index.html delete mode 100644 example-database/src/assets/logo.png create mode 100644 example-database/src/secrets.js create mode 100644 example-database/tutorial-resources/images/7.png create mode 100644 example-database/tutorial-resources/images/8.png create mode 100644 example-database/tutorial-resources/images/9.png create mode 100644 example-database/vite.config.js delete mode 100644 example-database/yarn.lock diff --git a/example-database/.gitignore b/example-database/.gitignore index 403adbc..2502760 100644 --- a/example-database/.gitignore +++ b/example-database/.gitignore @@ -14,6 +14,7 @@ yarn-error.log* pnpm-debug.log* # Editor directories and files +.code-workspace .idea .vscode *.suo diff --git a/example-database/README.md b/example-database/README.md index e13f820..a16daeb 100644 --- a/example-database/README.md +++ b/example-database/README.md @@ -1,482 +1,345 @@ -# Appwrite + VueJS =❤️ -This example is to showcase [Appwrite's JS API](https://github.com/appwrite/sdk-for-js) with [VueJS](https://vuejs.org/) by creating a simple tasks web application where you can add, remove and mark tasks as done. - -## Prerequisites - -- A recent version of [NodeJS](https://nodejs.org/) -- [Yarn](https://yarnpkg.com/) (Feel free to use [NPM](https://www.npmjs.com/) if you want to, just switch out the Yarn Commands for their NPM counterparts) -- [A locally running Appwrite instance](https://appwrite.io/docs/installation). - -## Getting Started -To get started as fast as possible we will use the Vue CLI, Here we will use NPX to launch the Vue CLI without installing it globally. -``` shell -npx @vue/cli create --default example-database -``` -that should create an app with VueJS 2, Babel and ESLint, while we are in the terminal we might as well install the appwrite SDK for later using: -```shell -yarn add appwrite -``` - - -With that done go ahead and launch the development server on `localhost:8080` using: -``` shell -yarn serve -``` - -## Housekeeping and The Appwrite SDK -First, we want to remove the default components contained within the boilerplate app we just created. - - 1. Delete the `src/components/HelloWorld.vue` component - 2. Replace the code in `src/App.vue` to the following: - ```html - - - - - - ``` - -This will give us a basic app with nothing in it, which allows us to start creating our tasks app. - -Next, we are going to create a JS File with the Appwrite Initialisation code so we can easily import it in our app code from where ever we like. Create a new file `src/utils.js` and place the following code in it. - -```js -import * as Appwrite from 'appwrite' -const appwrite = new Appwrite() -appwrite - .setEndpoint('http://EndpointURL.example/') // Replace this with your endpoint - .setProject('ProjectID') // Replace this with your projectID - -let promise = sdk.account.createSession('emailaddress', 'password'); // Replace with a appwrite account you created - -promise.then(function (response) { - console.log(`Successfully logged in as: ${response.name}`); // Success - }, function (error) { - console.error(error); // Failure - }); - - -export { appwrite } -``` -Make sure to replace the URL and ProjectID with your Endpoint and ProjectID You created in your appwrite installation. -Aswell as the email address and password to sign in the app to a appwrite account so it can access the functions it needs. - -## Creating the collection -In order for us to create this to-do app we need a place to store it, In appwrite we have collections and if you use or have used MongoDB this should be instantly familiar! We need to first create a collection in our appwrite database for this app to use. - -First, we want to navigate to our appwrite control panel and login, then navigate to the Database tab. -![Image Showing where the database tab is](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/1.png) -Once there go ahead and click on the `+` icon in the bottom right corner, Go ahead and give this new collection a name, any name it doesn't matter since what we need is the CollectionID which you will get once you've created the collection. It can be found here: -![Image Showing where the collection ID is](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/2.png) -Go ahead and copy that and keep it in an open notepad since we will use it later when we are writing code - -Next, we are going to create the schema for the collection. Go ahead and navigate to settings under the rules section click on `Add` where you want to add 3 rules, Copy the rules from the images below: - -![Image Showing collection rules 1](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/3.png) - -![Image Showing collection rules 2](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/4.png) - -![Image Showing collection rules 3](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/5.png) - -Finally, we are going to allow read, write access to everyone this is because we don't want to have to sign in to add these tasks and read them. Please note that you do not want to do this in a public web app powered by appwrite. We are only doing this for ease of use while developing this project. - -Navigate to the settings again and in the permissions section add * to both read and write permissions like so -![Image Showing permissions](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/6.png) - -Make sure to click Update to apply all the changes you've just made to the collection, once we've done that we can get back stuck into the code! -## Creating the fetch code -We want to be able to fetch all the tasks when the app loads up and when changes are made, so in app.js we are going to create a function that can do so, First, we are going to import the appwrite SDK we created earlier! - -In the ` -``` -With that done, we'll move onto creating the Template! - -## Writing the App Template -We'll take a break from the code to indulge ourselves in some nice HTML (VueJS Syntax) in the `