Vue JS

Step 1: Set Up Component StructureCopied!

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 ComponentsCopied!

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/[email protected]/dist/style.css";
      document.body.appendChild(styleLink);

      // Dynamically load Rollout bundle
      import(/* webpackIgnore: true */ "https://esm.sh/@rollout/[email protected]?bundle=all").then(
        ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
          this.rolloutRoot = createRoot(this.$refs.rolloutContainer);
          
          this.rolloutRoot.render(
            createElement(
              RolloutLinkProvider,
              { token },
              createElement(CredentialsManager)
            )
          );
        }
      );
    });
}

Step 3 (Optional): Handle Credential EventsCopied!

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 ...
      
      import(/* webpackIgnore: true */ "https://esm.sh/@rollout/[email protected]?bundle=all").then(
        ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
          this.rolloutRoot = createRoot(this.$refs.rolloutContainer);
          this.rolloutRoot.render(
            createElement(
              RolloutLinkProvider,
              { token },
              createElement(CredentialsManager, {
                onCredentialAdded: this.handleCredentialAdded
              })
            )
          );
        }
      );
    });
}

Full Implementation ExampleCopied!

<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/[email protected]/dist/style.css";
        document.body.appendChild(styleLink);

        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/[email protected]?bundle=all").then(
          ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
            this.rolloutRoot = createRoot(this.$refs.rolloutContainer);
            this.rolloutRoot.render(
              createElement(
                RolloutLinkProvider,
                { token },
                createElement(CredentialsManager, {
                  onCredentialAdded: this.handleCredentialAdded
                })
              )
            );
          }
        );
      });
  },

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