Skip to main content
The Sleekplan widget is a standard script snippet, so adding it to a Vue app takes one of two approaches. Pasting it into index.html is the simplest and works for both Vue 2 and Vue 3. Injecting it from a component gives you more control if you need to load it conditionally.
First grab your snippet from Settings → Widget and copy your SLEEK_PRODUCT_ID. See Install the Sleekplan widget for the basics.
In a Vue project created with Vite or Vue CLI, open the index.html file in your project’s public folder (or the project root for Vite). Paste the snippet just before the closing </head> tag: 
<head>
  <!-- your existing head content -->

  <!-- Sleekplan widget -->
  <script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID=YOUR_PRODUCT_ID;(function(){d=document;s=d.createElement("script");s.src="https://client.sleekplan.com/sdk/e.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
</head>
Replace YOUR_PRODUCT_ID with the numeric ID from your snippet. Because it loads asynchronously, it will not block your app from rendering.

​
Option 2: Inject from your root component

If you would rather keep the snippet out of index.html, or you need to load the widget only for certain users, inject it from the mounted hook of your root component (App.vue). This runs once, after the app is on the page. 
export default {
  name: "App",
  mounted() {
    window.$sleek = [];
    window.SLEEK_PRODUCT_ID = YOUR_PRODUCT_ID;

    const s = document.createElement("script");
    s.src = "https://client.sleekplan.com/sdk/e.js";
    s.async = true;
    document.getElementsByTagName("head")[0].appendChild(s);
  },
};
The same code works with the Composition API inside onMounted(): 
import { onMounted } from "vue";

onMounted(() => {
  window.$sleek = [];
  window.SLEEK_PRODUCT_ID = YOUR_PRODUCT_ID;

  const s = document.createElement("script");
  s.src = "https://client.sleekplan.com/sdk/e.js";
  s.async = true;
  document.getElementsByTagName("head")[0].appendChild(s);
});

​
Nuxt

For a Nuxt app, add the script through nuxt.config so it loads on every page: 
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { children: "window.$sleek=[];window.SLEEK_PRODUCT_ID=YOUR_PRODUCT_ID;" },
        { src: "https://client.sleekplan.com/sdk/e.js", async: true },
      ],
    },
  },
});

​
Identify your users

After the widget loads, attach your signed-in user with the SDK: 
$sleek.setUser({
  mail: user.email,
  id: user.id,
  name: user.name,
});
For confirmed accounts or private boards, use Single Sign-On instead. The full API is in the Developer Docs.

​
Next steps

Back to install overview

The snippet, user identification, and other platforms.

Content Security Policy

Allowlist the Sleekplan domains if your app enforces a CSP.