DEV Community

Cover image for Getting Started With Appwrite, Vue, Ionic & Capacitor
Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

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= 
Enter fullscreen mode Exit fullscreen mode

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
    }
  };
};
Enter fullscreen mode Exit fullscreen mode

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,
  };
};
Enter fullscreen mode Exit fullscreen mode

VIDEO

FULL SOURCE CODE

GitHub logo 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

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

Links


Top comments (0)