CDN / No-build

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/.

Quickstart

Copy this into an index.html and open it in a browser.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Callaloo CDN Example</title>

    <!-- Vue 3 (global build) -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Callaloo CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/@codeandfunction/callaloo@latest/dist/styles.css"
    />

    <!-- Callaloo JS (global build) -->
    <script src="https://unpkg.com/@codeandfunction/callaloo@latest/dist/callaloo.global.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <template id="app-template">
      <cl-theme-provider>
        <cl-toast-provider>
          <toast-button />
        </cl-toast-provider>
      </cl-theme-provider>
    </template>

    <template id="toast-button-template">
      <cl-button :on-click="onClickHandler" :size="CLSizes.Medium">
        Hello from CDN
      </cl-button>
    </template>

    <script>
      const { createApp } = Vue;
      const { CLThemeProvider, CLToastProvider, CLButton, CLSizes, useToast } =
        Callaloo;

      const ToastButton = {
        name: 'ToastButton',
        components: {
          'cl-button': CLButton,
        },
        setup() {
          const { showToast } = useToast();

          const onClickHandler = () => {
            showToast({
              title: 'Hello from CDN',
              message: 'This is a toast from Callaloo.',
              color: 'success',
            });
          };

          return { CLSizes, onClickHandler };
        },
        template: '#toast-button-template',
      };

      const App = {
        components: {
          'cl-theme-provider': CLThemeProvider,
          'cl-toast-provider': CLToastProvider,
          'toast-button': ToastButton,
        },
        template: '#app-template',
      };

      const app = createApp(App);
      app.use(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 @latest for convenience; pin to a specific version for stability in production.

Prefer installing with a bundler?

If you’re using Vite/Nuxt/etc, follow the standard install guide: Installation.

CDN / No-build ​

Quickstart ​

Tradeoffs ​

Prefer installing with a bundler? ​

CDN / No-build

Quickstart

Tradeoffs

Prefer installing with a bundler?