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/link-react@0.0.10/dist/style.css";
document.body.appendChild(styleLink);
// Dynamically load Rollout bundle
import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@0.0.10?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/link-react@0.0.10?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/link-react@0.0.10/dist/style.css";
document.body.appendChild(styleLink);
import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@0.0.10?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>