Vue Integration

Add analytics to your Vue Figma plugin with the useTode composable. This guide shows you how to track user actions in Vue-based Figma plugins and widgets.

Installation

Install the core SDK and Vue adapter:

Terminal

npm install @tode-sdk/core @tode-sdk/figma-vue

Setup

Initialize in Plugin Controller

Set up Tode in your plugin's main code file:

code.js

import { tode } from '@tode-sdk/core';

// Show your Vue UI
figma.showUI(__html__, { width: 400, height: 600 });

// Initialize Tode for Figma plugin analytics
await tode.init({ apiKey: 'your-api-key' });

// Optional: Track plugin open from controller
tode.trackAction('plugin_opened');

Configure Network Access

Add Tode's URLs to your plugin's manifest.json to enable analytics requests. Learn more about network access.

manifest.json

{
  "name": "Your Plugin",
  "id": "your-plugin-id",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "index.html",
  "networkAccess": {
    "allowedDomains": [
      "https://mvp-events-processing-production.up.railway.app",
      "wss://mvp-events-processing-production.up.railway.app"
    ]
  }
}

Use the Composable in Your Vue UI

Use useTode in your Vue components:

App.vue

<script setup>
import { useTode } from '@tode-sdk/figma-vue';

const { isReady, trackAction } = useTode();

const handleExport = () => {
if (isReady.value) {
  trackAction('export_clicked');
}
};
</script>

<template>
<button @click="handleExport" :disabled="!isReady">
  Export Design
</button>
<p>Analytics: {{ isReady ? 'Connected' : 'Connecting...' }}</p>
</template>

Composable Reference

useTode()

Returns an object with the following properties and methods:

Property/Method	Type	Description
`tode`	`Ref<Tode>`	The Tode instance for direct access
`isReady`	`Ref<boolean>`	Whether Tode is initialized (`tode.isReady`)
`trackAction(name)`	`function`	Track a simple action (API)
`trackActionWithMetric(name, value)`	`function`	Track action with numeric value (API)

Examples

Basic Tracking

ToolButton.vue

<script setup>
import { useTode } from '@tode-sdk/figma-vue';

const props = defineProps(['tool']);
const { isReady, trackAction } = useTode();

const handleClick = () => {
// Track which tool was selected in your Figma plugin
if (isReady.value) {
  trackAction(`tool_selected_${props.tool}`);
}
};
</script>

<template>
<button @click="handleClick">{{ tool }}</button>
</template>

Track with Metrics

ExportPanel.vue

<script setup>
import { ref } from 'vue';
import { useTode } from '@tode-sdk/figma-vue';

const { isReady, trackActionWithMetric } = useTode();
const selectedItems = ref([]);

const handleExport = async () => {
// Perform export logic...

// Track export with item count for Figma widget analytics
if (isReady.value) {
  trackActionWithMetric('items_exported', selectedItems.value.length);
}
};
</script>

<template>
<button @click="handleExport">
  Export {{ selectedItems.length }} Items
</button>
</template>

Track Feature Views

FeatureView.vue

<script setup>
import { watch, ref } from 'vue';
import { useTode } from '@tode-sdk/figma-vue';

const { isReady, trackAction } = useTode();
const hasTrackedView = ref(false);

// Track feature view once when component mounts and Tode is ready
watch(isReady, (ready) => {
if (ready && !hasTrackedView.value) {
  trackAction('feature_viewed');
  hasTrackedView.value = true;
}
}, { immediate: true });
</script>

<template>
<div>Feature Content</div>
</template>

Options API

ClassicComponent.vue

<script>
import { defineComponent } from 'vue';
import { useTode } from '@tode-sdk/figma-vue';

export default defineComponent({
setup() {
  const { isReady, trackAction, trackActionWithMetric } = useTode();
  return { isReady, trackAction, trackActionWithMetric };
},
methods: {
  handleClick() {
    if (this.isReady) {
      this.trackAction('button_clicked');
    }
  }
}
});
</script>

<template>
<button @click="handleClick" :disabled="!isReady">
  Track Action
</button>
</template>

Best Practices

1. Always Check `isReady`

Vue

<script setup>
const { isReady, trackAction } = useTode();
 
// Good - check before tracking
const track = () => {
  if (isReady.value) {
    trackAction('action');
  }
};
</script>

2. Use Computed Properties

Vue

<script setup>
import { computed } from 'vue';
 
const { isReady, trackAction } = useTode();
 
// Good - reactive computed
const canTrack = computed(() => isReady.value && !isLoading.value);
</script>
 
<template>
  <button :disabled="!canTrack" @click="trackAction('click')">
    Track
  </button>
</template>

3. Use Descriptive Action Names

Vue

<script setup>
const { trackAction } = useTode();
 
// Good - clear and descriptive
trackAction('export_to_png');
trackAction('layer_renamed');
 
// Bad - too vague
trackAction('click');
trackAction('action1');
</script>

4. Watch for Ready State Changes

Vue

<script setup>
import { watch } from 'vue';
 
const { isReady, trackAction } = useTode();
 
// Track when analytics becomes ready
watch(isReady, (ready) => {
  if (ready) {
    trackAction('analytics_connected');
  }
});
</script>

Next Steps

Learn about the API Reference for all available methods
See other framework guides: React, Angular, Svelte

#Vue Integration

#Installation

#Setup

#Composable Reference

#useTode()

#Examples

#Basic Tracking

#Track with Metrics

#Track Feature Views

#Options API

#Best Practices

#1. Always Check isReady

#2. Use Computed Properties

#3. Use Descriptive Action Names

#4. Watch for Ready State Changes

#Next Steps

Track your Figma plugin