Skip to main content

​
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: 
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)
          )
        );
      });
    });
}

​
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, {
              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, {
                onCredentialAdded: this.handleCredentialAdded
              })
            )
          );
        });
      });
  },

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