CDN / No-build Quickstart
Use Callaloo without a build step by loading it directly from a CDN. This is ideal for prototypes, demos, and static sites.
Try it live
See the no-build demo at https://cdn-playground.callaloo.dev/.
HTML Template
Copy this into an index.html and open it in a browser. This setup uses Vue 3, TailwindCSS, and Callaloo all via CDN.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Callaloo CDN Quickstart</title>
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- TailwindCSS (optional for layout) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser"></script>
<!-- Callaloo CSS -->
<link rel="stylesheet" href="https://unpkg.com/@codeandfunction/callaloo/dist/styles.css">
<!-- Callaloo JS -->
<script src="https://unpkg.com/@codeandfunction/callaloo/dist/callaloo.global.js"></script>
</head>
<body class="bg-slate-50">
<div id="app">
<!-- Vue App Mount Point -->
</div>
<!-- Root: providers only -->
<template id="root-template">
<cl-theme-provider>
<cl-toast-provider>
<app />
</cl-toast-provider>
</cl-theme-provider>
</template>
<!-- App layout template -->
<template id="app-template">
<div class="p-8 flex flex-col items-center gap-4">
<cl-heading :type="CLHeadingTypes.XL">Hello Callaloo!</cl-heading>
<cl-button :on-click="notify">Click Me</cl-button>
</div>
</template>
<script>
const { createApp } = window.Vue;
const {
CLThemeProvider,
CLToastProvider,
CLButton,
CLHeading,
CLHeadingTypes,
CLColors,
CLIconNames,
useToast
} = window.Callaloo;
const App = {
name: 'App',
components: {
'cl-button': CLButton,
'cl-heading': CLHeading
},
setup() {
const { showToast } = useToast();
const notify = () => {
showToast({
title: 'Welcome!',
message: 'You are using Callaloo from a CDN.',
color: CLColors.Success,
icon: CLIconNames.CircleCheck
});
};
return { notify, CLHeadingTypes };
},
template: '#app-template'
};
const Root = {
name: 'Root',
components: {
'cl-theme-provider': CLThemeProvider,
'cl-toast-provider': CLToastProvider,
app: App
},
template: '#root-template'
};
const app = createApp(Root);
// Register all Callaloo components globally
app.use(window.Callaloo.default);
app.mount('#app');
</script>
</body>
</html>Tradeoffs
- No tree-shaking: you’re loading the global bundle.
- Larger payload: great for demos, less ideal for production apps.
- Versioning: this example uses the latest version for convenience; pin to a specific version (e.g.,
https://unpkg.com/@codeandfunction/[email protected]/dist/styles.css) for stability in production.
Prefer installing with a bundler?
If you’re using Vite/Nuxt/etc, follow the standard install guide: Installation.