Quickstart: Vue

Overview#

This is a brief example of how to integrate Architect SDK into your Vue application. For more comprehensive guide you can check our phonebook app tutorial.

Install Architect SDK#

Install Architect SDK via:

npm
Yarn

npm install architect-sdk

You should see architect-sdk dependency added to package.json file¹.

Setup environment#

First in your .env file add following line:

VITE_BASE_URL=https://<your-app-id>.essentialz.cloud

Then create new file architectSDKConfig.ts. Then add following imports.

import client, { ArchitectResource } from "architect-sdk";

Then import VITE_BASE_URL from .env.

const baseUrl = import.meta.env.VITE_BASE_URL;
if (typeof baseUrl !== "string") throw Error("Bad base url parameter");

Next we will define special type to make full use of Architect SDK¹. We need to define special type ArchitectResource and pass it to Architect SDK configuration. This will enable you to get full autocomplete and other benefits of strongly typed package. Let's say that you are making todo app and you have Todo type with following properties:

type Todo = {
  name: string;
  description: string;
  created: string;
};

Then you should define type ArchitectSchema like this:

export type ArchitectSchema = {
  todos: ArchitectResource<Todo>;
};

Finally we should initialize Architect SDK by passing to him baseUrl and ArchitectSchema like this:

export const architectSDK = client<ArchitectSchema>({
  baseUrl,
});

You can now use architectSDK to update, create, delete, get you todos.

You can skip this step if you are not using typescript.↩