vue

Grafbase ⨯ Vue

Join our Community

This example uses the Vue framework with Vite and Typescript. In production environments, you should switch to a supported auth provider using the Authorization header with requests to secure your data.

Getting Started

1. Run npx degit grafbase/grafbase/examples/vue grafbase-with-vue to clone this example
2. Change directory into the new folder cd grafbase-with-vue
3. Run cp .env.example .env
4. Open .env in your code editor and provide your Grafbase API endpoint and API key. Example should be fine for npx grafbase@latest dev!
5. Run npm install, or yarn install to install dependencies
6. Run npx grafbase@latest dev in your terminal
7. Populate the backend with some Message entries using a GraphQL mutation:

mutation {
  messageCreate(
    input: { author: "Grafbase Admin", body: "Grafbase is awesome!" }
  ) {
    message {
      id
    }
  }
}

8. In another terminal, run npm run dev and visit http://localhost:5174/

Learn More About Grafbase

To learn more about Grafbase, take a look at the following resources:

• Grafbase - learn about Grafbase features and API.

• To learn more about React, take a look at the Vue Docs

Run on Codesandbox