Vue

Integrating Eartho into Your Vue App

This section describes how to integrate Eartho into a Vue app.

1. Install the SDK

You can install the SDK using npm or yarn.

Using npm:

npm install @eartho/one-client-vue

Using yarn:

yarn add @eartho/one-client-vue

2. Retrieve Eartho Client ID and Access ID

Go to Eartho Creator and copy your Eartho client ID and access ID from the "Developers Integration" section.

3. Initialize and Configure the SDK

Integrate Eartho into your Vue app by configuring the SDK and handling authentication.

Example Code:

// main.js
import { createApp } from 'vue';
import { createEarthoOne } from '@eartho/one-client-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
  createEarthoOne({
    client_id: 'YOUR_EARTHO_CLIENT_ID',
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  })
);

app.mount('#app');

Adding Login to Your Application

Use the connectWithPopup function from useEarthoOne in your component to handle login.

// components/LoginButton.vue
<template>
  <button @click="login">Log in</button>
</template>

<script>
import { useEarthoOne } from '@eartho/one-client-vue';

export default {
  setup() {
    const { connectWithPopup } = useEarthoOne();

    const login = () => {
      connectWithPopup({ access_id: "YOUR_EARTHO_ACCESS_ID" });
    };

    return { login };
  }
};
</script>

Calling an API

Use the getIdToken function from useEarthoOne to call an API with the user's ID token.

// components/ApiCallButton.vue
<template>
  <button @click="doSomethingWithToken">Call API</button>
</template>

<script>
import { useEarthoOne } from '@eartho/one-client-vue';

export default {
  setup() {
    const { getIdToken } = useEarthoOne();

    const doSomethingWithToken = async () => {
      const token = await getIdToken();
      const response = await fetch('https://api.example.com/posts', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      const data = await response.json();
      console.log(data);
    };

    return { doSomethingWithToken };
  }
};
</script>

Additional Resources

For more detailed examples and usage, visit the Eartho Vue Example Repository.