Nuxt integration

Create a new nuxt project with a pages/index.vue.

For now, hardcode the title and text of the page.

<script setup>

  const page = {
    "title": "Home",
    "text": "Lorem ipsum dolor sit amet."
  }

</script>

<template>
  <main>
  <h1>{{ page.title }}</h1>
  <p>{{ page.text }}</p>
  </main>
</template>

Next, we'll move this data out of the code and into Orbitype.

Create a new Orbitype project with a pages/home.json.

Open the file, switch to code mode and copy over your data:

{
  "title": "Home",
  "text": "Lorem ipsum dolor sit amet."
}

Return to the Vue file and replace the hardcoded data with a fetch call:

const page = await $fetch(import.meta.env.VITE_S3_URL + "/pages/home.json")

It is recommended to load your S3 base URL from an environment variable.

You can find your S3 base URL in the project settings.

Alternatively, choose Get file URL from an item's context menu.

You can now edit the page's data in Orbitype's visual tree mode.

Try experimenting with more complex structures like arrays and nested objects.

Orbitype supports any data structure that can be declared with JSON.

For more complex use cases, you may attach a database to your project.

With Orbitype's API, you can then implement all kinds of CRUD operations.

Start by adding a new connector in the project settings.

Choose the SQL implementation and provide your database's credentials.

They will be AES-256 encrypted on save.

Create an API key for the new connector and store it as an env variable.

In your Nuxt project, create a server/api/comments/index.get.js.

Use Orbitype's API to get a list of comments:

import qs from "qs" // npm install qs

export default defineEventHandler(async (event) => {

  const bindings = getQuery(event)

  let sql = "SELECT * FROM comments"

  if (bindings.id) sql += " WHERE id = :id"

  else sql += " ORDER BY created_at DESC"

  return await $fetch("https://core.orbitype.com/api/sql/v1" + qs.stringify({ sql, bindings }),
  { headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY } })
})

Similarly, you can create a new comment with an insert statement.

Just create a server/api/comments/index.post.js like this:

export default defineEventHandler(async (event) => {

  const bindings = await readBody(event)

  let sql = "INSERT INTO comments (text)"

  sql += " VALUES (:text)"

  return await $fetch("https://core.orbitype.com/api/sql/v1",
  {
    method: "POST",
    body: { sql, bindings },
    headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY },
  })
})

Similarly, you can create a new comment with an insert statement.

Just create a server/api/comments/index.post.js like this:

export default defineEventHandler(async (event) => {

  const bindings = await readBody(event)

  let sql = "INSERT INTO comments (text)"

  sql += " VALUES (:text)"

  return await $fetch(

  "https://core.orbitype.com/api/sql/v1",
  {
    method: "POST",
    body: { sql, bindings },
    headers: { "X-API-KEY": import.meta.env.ORBITYPE_API_KEY },
  })
})

In your Vue templates, call those endpoints and use the data:

<script setup>

const comments = await $fetch("/api/comments")

async function createComment() {

await $fetch("/api/comments", {

method: "POST",

body: { text: "Hello, world!" },

})

}

</script>

<template>
  <ul>
    <li v-for="c of comments">
      <h2>{{ c.text }}</h2>
      <time>{{ c.created_at }}</time>
    </li>
  </ul>
</template>