Vue JS

Step 1: Set Up Component Structure

Create a Vue component with a container ref for mounting Rollout components:

<template>
  <div>
    <h1>Your Application</h1>
    <div ref="rolloutContainer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolloutRoot: null
    };
  },
  mounted() {
    // Initialization code will go here
  },
  beforeDestroy() {
    // Cleanup logic if needed
  }
};
</script>

Step 2: Initialize Rollout Components

Add the initialization logic in mounted lifecycle hook:

Choose what data to sync

An entity is a type of data, such as people, notes, or tasks. People sync automatically where supported. The examples below enable optional notes and tasks with entitiesToSync; choose the types your app needs. Alternatively, omit this prop to use the defaults you choose in dashboard Settings. An explicit selection in code takes precedence over those defaults. This configures new connections. For other types or accounts that are already connected, see Choose what data to sync.

mounted() {
  // Fetch token from your backend
  fetch("/rollout-token")
    .then((resp) => resp.json())
    .then((data) => data.token)
    .then((token) => {
      // Add required styles
      const styleLink = document.createElement("link");
      styleLink.rel = "stylesheet";
      styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
      document.body.appendChild(styleLink);

      // Load React, ReactDOM, and Rollout Link using the same React instance
      Promise.all([
        import(/* webpackIgnore: true */ "https://esm.sh/react@18"),
        import(/* webpackIgnore: true */ "https://esm.sh/react-dom@18/client"),
        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
      ]).then(([React, ReactDOM, rollout]) => {
        this.rolloutRoot = ReactDOM.createRoot(this.$refs.rolloutContainer);

        this.rolloutRoot.render(
          React.createElement(
            rollout.RolloutLinkProvider,
            { token },
            React.createElement(rollout.CredentialsManager, {
              entitiesToSync: { notes: true, tasks: true }
            })
          )
        );
      });
    });
}

Step 3 (Optional): Handle Credential Events

Add credential event handling by implementing a handler method:

methods: {
  handleCredentialAdded({ id, appKey }) {
    console.log(`New credential added - ID: ${id}, App: ${appKey}`);
    // Add your custom logic here
  }
},

mounted() {
  fetch("/rollout-token")
    .then((resp) => resp.json())
    .then((data) => data.token)
    .then((token) => {
      // ... existing setup code ...
      
      Promise.all([
        import(/* webpackIgnore: true */ "https://esm.sh/react@18"),
        import(/* webpackIgnore: true */ "https://esm.sh/react-dom@18/client"),
        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
      ]).then(([React, ReactDOM, rollout]) => {
        this.rolloutRoot = ReactDOM.createRoot(this.$refs.rolloutContainer);
        this.rolloutRoot.render(
          React.createElement(
            rollout.RolloutLinkProvider,
            { token },
            React.createElement(rollout.CredentialsManager, {
              entitiesToSync: { notes: true, tasks: true },
              onCredentialAdded: this.handleCredentialAdded
            })
          )
        );
      });
    });
}

Full Implementation Example

<template>
  <div>
    <h1>Your Application</h1>
    <div ref="rolloutContainer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolloutRoot: null
    };
  },

  methods: {
    handleCredentialAdded({ id, appKey }) {
      console.log(`New credential added - ID: ${id}, App: ${appKey}`);
      // Implement your custom logic here
    }
  },

  mounted() {
    fetch("/rollout-token")
      .then((resp) => resp.json())
      .then((data) => data.token)
      .then((token) => {
        const styleLink = document.createElement("link");
        styleLink.rel = "stylesheet";
        styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
        document.body.appendChild(styleLink);

        Promise.all([
          import(/* webpackIgnore: true */ "https://esm.sh/react@18"),
          import(/* webpackIgnore: true */ "https://esm.sh/react-dom@18/client"),
          import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
        ]).then(([React, ReactDOM, rollout]) => {
          this.rolloutRoot = ReactDOM.createRoot(this.$refs.rolloutContainer);
          this.rolloutRoot.render(
            React.createElement(
              rollout.RolloutLinkProvider,
              { token },
              React.createElement(rollout.CredentialsManager, {
                entitiesToSync: { notes: true, tasks: true },
                onCredentialAdded: this.handleCredentialAdded
              })
            )
          );
        });
      });
  },

  beforeDestroy() {
    // Optional cleanup
    if (this.rolloutRoot) {
      this.rolloutRoot.unmount();
    }
  }
};
</script>

Overview

Getting Started

Features

Customization

Advanced

Troubleshooting

Security & Legal

Step 1: Set Up Component Structure

Step 2: Initialize Rollout Components

Choose what data to sync

Step 3 (Optional): Handle Credential Events

Full Implementation Example

​Step 1: Set Up Component Structure

​Step 2: Initialize Rollout Components

​Choose what data to sync

​Step 3 (Optional): Handle Credential Events

​Full Implementation Example

Step 1: Set Up Component Structure

Step 2: Initialize Rollout Components

Choose what data to sync

Step 3 (Optional): Handle Credential Events

Full Implementation Example