Five minutes to make an AO Full Stack App

mini-ao-full-stack.md

Five minutes to make an AO Full Stack App

Video Tutorial

1. init nuxt project

npx nuxi init -t github:nuxt-ui-pro/saas ao-full-stack
pnpm i @permaweb/aoconnect @vue-macros/nuxt

2. Run your AO process

npm i -g https://get_ao.g8way.io
aos
# copy the process id generated in the aos

3. Write your code

create a file named ao.vue under pages folder paste these code inside

<script setup lang="ts">
import {
  createDataItemSigner,
  result,
  message,
  dryrun
} from '@permaweb/aoconnect'

useSeoMeta({
  title: 'AO'
})

let data = $ref('Hello AO!')

// replace the id with yours!
const process = 'pYwJ3O8evtwbD0_4jINqA0oOIhMpI1VCZBYBe_t580Y'
let rz = $ref('')
const doSendMsg = async () => {
  rz = await message({
    process,
    data,
    signer: createDataItemSigner(window.arweaveWallet),
  })
  rz = await result({
    message: rz,
    process,
  })
  console.log(`====> rz :`, rz)
}
</script>
<template>
  <UPage>
    <UContainer>
      <UMain :ui="{ wrapper: 'mx-auto mt-20 max-w-md' }">
        <div class="space-y-5">
          <h2 class="font-bold text-center text-primary text-3xl w-100">AO</h2>
          <p>{{ rz }}</p>
          <UInput v-model="data" />
          <UButton block @click="doSendMsg">
            Submit
          </UButton>
        </div>
      </UMain>
    </UContainer>
  </UPage>
</template>

4. see your result

open http://localhost:3000/ao

click on the Button Submit.

You will see the text send to the ao process and get printed like this:

New Message From 2cA...z_A: Data = Hello AO!