Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor

Appwrite - 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 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.

• useAppwrite
• useAccount
• useDatabases
• useStorage

Ionic Framework components are used to create the mobile interface and Ionic Capacitor 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

VITE_ENDPOINT= 
VITE_PROJECT= 
VITE_COLLECTION_ID= 
VITE_DATABASE_ID= 
VITE_BUCKET_ID=

And the code for the composable...

// 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 useAccount composable to create endpoint for the essential functions associated with integrating the account functionality into the application.

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

FULL SOURCE CODE