Nuxt integration

Orbitype can easily be integrated into the popular Vue Framework Nuxt.

Quick start

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>{{ title }}</h1>
  <p>{{ text }}</p>
  </main>
</template>

Move Data to Orbitype

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 than can be declared with JSON.

Advanced usage

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 databases'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.

Setup Nuxt Server Function

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 } })
})

Server Function Send Data

Similarily, 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 },
  })
})

Server Function Send Data

Similarily, 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 },
  })
})

Call Server Function from Nuxt Template

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>

Learn more

Cookbook - Sections

Modern webpages are often composed of many different sections.

Things like hero banners, testimonials, FAQs or simple text blocks.

Developers implement these as reusable components with props.

But how do we allow non-technical people to use them in Orbitype?

Cancel Account

To ensure you’re comfortable using Orbitype, we want to make sure everything is clear. If you have any questions or encounter issues understanding how something works, please don’t hesitate to reach out. We’re here to assist you—just send us a message at info@orbitype.com, and we’ll be happy to help you with any questions you have.