The data platform that powers your Vue application

Build powerful applications with Vue and Grafbase

Grafbase + Vue

Efficiently develop user interfaces with Vue.

Vue 3 template and script for GraphQL request
<template>
  <div class="app">
    <h3>Messages:</h3>
    <ul>
      <li v-for="node in nodes" :key="node.id">
        <p>{{ node.author }}</p>
        <p>{{ node.body }}</p>
        <p>{{ node.createdAt }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="tsx">
import { defineComponent, ref } from 'vue';
interface MessageNode {
  id: string;
  author: string;
  body: string;
  createdAt: string;
}

export default defineComponent({
  name: 'App',

  setup() {
    const nodes = ref<MessageNode[]>([]);

    const GetAllMessagesQuery = /* GraphQL */ `
    query GetAllMessages($first: Int!) {
      messageCollection(first: $first) {
        edges {
          node {
            id
            author
            body
            createdAt
          }
        }
      }
    }
  `

    fetch('http://localhost:4000/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: GetAllMessagesQuery,
        variables: {
          first: 100
        }
      }),
  })
    .then((res) => res.json())
    .then((data) => {
      nodes.value = data.data.messageCollection.edges.map(
        (edge: { node: MessageNode }) => edge.node
      );
    })
    .catch((error) => {
      console.error(error);
    });

  return { nodes };
  },
});
</script>
Vue 3 template and script for GraphQL request
<template>
  <div class="app">
    <h3>Messages:</h3>
    <ul>
      <li v-for="node in nodes" :key="node.id">
        <p>{{ node.author }}</p>
        <p>{{ node.body }}</p>
        <p>{{ node.createdAt }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="tsx">
import { defineComponent, ref } from 'vue';
interface MessageNode {
  id: string;
  author: string;
  body: string;
  createdAt: string;
}

export default defineComponent({
  name: 'App',

  setup() {
    const nodes = ref<MessageNode[]>([]);

    const GetAllMessagesQuery = /* GraphQL */ `
    query GetAllMessages($first: Int!) {
      messageCollection(first: $first) {
        edges {
          node {
            id
            author
            body
            createdAt
          }
        }
      }
    }
  `

    fetch('http://localhost:4000/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: GetAllMessagesQuery,
        variables: {
          first: 100
        }
      }),
  })
    .then((res) => res.json())
    .then((data) => {
      nodes.value = data.data.messageCollection.edges.map(
        (edge: { node: MessageNode }) => edge.node
      );
    })
    .catch((error) => {
      console.error(error);
    });

  return { nodes };
  },
});
</script>

Testimonials

?
Simon Grimm@schlimmson

Tried @grafbase and was impressed how easy & fast it was to create your serverless GraphQL API + local instance 🔥

?
Rasmus Hjulskov@RasmusHjulskov

Current fantasy tech stack 🚀: - @nextjs - @tailwindcss - @typescript - @trpcio - @grafbase - @ClerkDev

?
Kate@whoiskatrin

As an engineer, I'm always on the lookout for tools that make my job easier and more efficient. @grafbase has quickly become a go-to for me in my #GraphQL development work. Its real-time query execution and intuitive schema management have saved me countless hours of debugging

?
Roy@royboy789

Done playing with @Cloudflare Pages & Workers, for now. Now to learn some @grafbase and see how if it can play a role, because it is pretty nifty!

?
Bobby Blastbeats@tubbo

not sure if @grafbase is so good that it will actually obviate my entire job, or if it's good enough that i can use it at work without someone questioning my existence. either way, i am sold on the concept of "upload some SDL and query shit, stop worrying about the DB infra".

?
Ben@nurodev

Damn, trying out the @grafbase beta & it's super slick! Feels like what @planetscaledata is doing for databases, @Grafbase is going for #GraphQL 🔥

Start building with Vue

We’ve made it super easy to get started integrating Grafbase with Vue.

Quickstart

Learn the basics of Grafbase and deploy to production in only a few short steps.

Developer Guides

Learn how to use Grafbase with frontend frameworks, external APIs, and more.

Vue Example

See how Grafbase works with Vue in this example.