Getting Started With Appwrite, Vue, Ionic & 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 useAppwrite composable to create endpoint for the essential functions associated with integrating the account functionality into the application.

// 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

FULL SOURCE CODE

aaronksaunders / my-appwrite-vuejs-ionic-app

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.

Getting Started With Appwrite Cloud, Vue JS Ionic Framework & Capacitor

Name: Getting Started With Appwrite, Vue, Ionic & Capacitor
Rating: 1.7 (564 reviews)
Author: aaronksaunders

VIDEO - https://youtu.be/3d71O1zvlaw

Part One

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.

In this video, I'm going to show you 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.

I am creating vue composables for Account and AppwriteClient. Will create them for Database and Storage in part two of the video series when I cover those topics