Getting Started With Appwrite, Vue, Ionic & Capacitor
Tags: appwrite, vue, ionic, webdev
Published: 2023-05-02 22:32:30

>[Appwrite](https://appwrite.io/) - Build Fast. Scale Big. All in One Place.
Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for a developer experience in the coding languages you love.

This video series will cover
- **login ( Part I )**
- **logout ( Part I )**
- **create account ( Part I )**
- **re establish previous session ( Part I )**
- add documents
- list documents
- subscribe to events when collection is updated
- upload images
- associate images with documents

In this first video we will show step by step how to get started with [Appwrite Cloud](https://appwrite.io/public-beta) using Vue JS Ionic Framework & Capacitor including login, logout, and creating an account, working with Appwrite Cloud Instance.

To modularize the code, we will be creating composables to manage integration with the [Appwrite Web SDK](https://appwrite.io/docs).
- useAppwrite
- useAccount
- useDatabases
- useStorage

[Ionic Framework components](https://ionicframework.com/docs/) are used to create the mobile interface and [Ionic Capacitor](https://capacitorjs.com/) will be used to package the web application for deployment on to mobile devices.

###SetUp And Configuration of AppWrite
We set things up using a composable which initializes the client and exposes references to the client object and the account object.

First make sure you have created a `.env` file in the root of your project with the following keys and fill in the values from your AppWrite project
```shell
VITE_ENDPOINT= 
VITE_PROJECT= 
VITE_COLLECTION_ID= 
VITE_DATABASE_ID= 
VITE_BUCKET_ID= 
```

And the code for the composable...
```javascript
// useAppwrite
import { Client, Account, ID } from "appwrite";
import { ref } from "vue";

const accountRef = ref<Account>();
const clientRef = ref<Client>();

export const useAppwrite = () => {

  clientRef.value = new Client();

  clientRef.value
    .setEndpoint(import.meta.env.VITE_ENDPOINT)
    .setProject(import.meta.env.VITE_PROJECT);

  accountRef.value = new Account(clientRef.value);

  return {
    client :clientRef,
    account : accountRef,
    ID,
    config : {
      DATABASE_ID : import.meta.env.VITE_DATABASE_ID,
      COLLECTION_ID : import.meta.env.VITE_COLLECTION_ID,
      BUCKET_ID : import.meta.env.VITE_BUCKET_ID
    }
  };
};
```
###Login, Logout & Create Account
Login leverages the `useAppwrite` composable to create endpoint for the essential functions associated with integrating the account functionality into the application.
```js
// useAppwriteAccount.ts

import { ref } from "vue";
import { useAppwrite } from "./useAppwrite";

export const useAccount = () => {
  const { account, ID } = useAppwrite();

  const registerUser = (email: string, password: string, name?: string) => {
    // Register User
    return account.value?.create(ID.unique(), email, password, name).then(
      (response) => {
        return { data: response, error : undefined };
      },
      (error) => {
        return { error, data : undefined };
      }
    );
  };

  const loginUser = (email: string, password: string) => {
    return account.value?.createEmailSession(email, password).then(
      (data) => {
        return { data: data, error : undefined };
      },
      (error) => {
        return { error: error, data : undefined };
      }
    );
  };

  const logoutUser = async () => {
    try {
      await account.value?.deleteSession("current");
      return { data: true };
    } catch (error) {
      return { error };
    }
  };

  return {
    currentUser: () => account.value?.get(),
    registerUser,
    loginUser,
    logoutUser,
  };
};
```


### VIDEO
{% youtube 3d71O1zvlaw %}

### FULL SOURCE CODE
{% github aaronksaunders/my-appwrite-vuejs-ionic-app %}