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 inmounted 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>