Vue

Use the Mailpulse SDK with Vue 3 using the built-in composables.

Installation


npm install mailpulse vue

Setup Provider

Use provideMailpulse in your root component to make the client available to all child components:


<script setup lang="ts">
import { provideMailpulse } from 'mailpulse/vue';
 
provideMailpulse({
  apiKey: 'your-api-key',
});
</script>
 
<template>
  <div>
    <YourApp />
  </div>
</template>

Configuration Options

Option	Type	Required	Description
`apiKey`	`string`	Yes	Your Mailpulse API key
`apiUrl`	`string`	No	Custom API URL

useStats

Fetch global tracking statistics.


<script setup lang="ts">
import { useStats } from 'mailpulse/vue';
 
const { data, isLoading, error, refetch } = useStats();
</script>
 
<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <p>Total Emails: {{ data?.totalEmails }}</p>
    <p>Open Rate: {{ data?.openRate }}%</p>
    <p>Click Rate: {{ data?.clickRate }}%</p>
    <button @click="refetch">Refresh</button>
  </div>
</template>

Return Type


interface UseStatsReturn {
  data: Ref<TrackingStats | null>;
  isLoading: Ref<boolean>;
  error: Ref<Error | null>;
  refetch: () => Promise<void>;
}

useCampaigns

Fetch all campaigns.


<script setup lang="ts">
import { useCampaigns } from 'mailpulse/vue';
 
const { data, isLoading, error } = useCampaigns();
</script>
 
<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <ul v-else>
    <li v-for="campaign in data?.campaigns" :key="campaign.id">
      {{ campaign.name }}
    </li>
  </ul>
</template>

useCampaign

Fetch a specific campaign with details.


<script setup lang="ts">
import { useCampaign } from 'mailpulse/vue';
 
const props = defineProps<{
  campaignId: string;
}>();
 
const { data, isLoading, error } = useCampaign(props.campaignId);
</script>
 
<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <h1>{{ data?.name }}</h1>
    <p>Emails: {{ data?.stats.totalEmails }}</p>
    <p>Open Rate: {{ data?.stats.openRate }}%</p>
 
    <h2>Emails</h2>
    <ul>
      <li v-for="email in data?.emails" :key="email.id">
        {{ email.subject }} - {{ email.opens }} opens
      </li>
    </ul>
  </div>
</template>

Parameters

Parameter	Type	Description
`campaignId`	`string`	Campaign ID to fetch

useCampaignStats

Fetch detailed campaign analytics with time-series data.


<script setup lang="ts">
import { useCampaignStats } from 'mailpulse/vue';
 
const props = defineProps<{
  campaignId: string;
}>();
 
const { data, isLoading, error } = useCampaignStats(props.campaignId, {
  period: '30d',
});
</script>
 
<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <h1>{{ data?.campaign.name }}</h1>
    <p>Period: {{ data?.period.start }} - {{ data?.period.end }}</p>
 
    <h2>Stats</h2>
    <p>Open Rate: {{ data?.stats.openRate }}%</p>
    <p>Click Through Rate: {{ data?.stats.clickThroughRate }}%</p>
 
    <h2>Daily Breakdown</h2>
    <div v-for="day in data?.openAndClicks" :key="day.date">
      {{ day.date }}: {{ day.opens }} opens, {{ day.clicks }} clicks
    </div>
 
    <h2>Top Links</h2>
    <div v-for="link in data?.topLinks" :key="link.url">
      {{ link.url }}: {{ link.clicks }} clicks
    </div>
  </div>
</template>

Parameters

Parameter	Type	Description
`campaignId`	`string`	Campaign ID
`options.period`	`string`	Period filter (`7d`, `30d`, `90d`, or date range)

useRegisterEmail


<script setup lang="ts">
import { useRegisterEmail } from 'mailpulse/vue';
 
const { registerEmail, isLoading, error, data } = useRegisterEmail();
 
const handleSubmit = async () => {
  const result = await registerEmail({
    recipient: 'user@example.com',
    subject: 'Welcome!',
    htmlContent: '<html>...</html>',
    campaignId: 'my-campaign',
  });
 
  if (result) {
    console.log('Tracking ID:', result.emailTrackingId);
    console.log('Pixel URL:', result.pixelUrl);
  }
};
</script>
 
<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit" :disabled="isLoading">
      {{ isLoading ? 'Registering...' : 'Register Email' }}
    </button>
    <p v-if="error">Error: {{ error.message }}</p>
    <p v-if="data">Registered! ID: {{ data.emailTrackingId }}</p>
  </form>
</template>

Return Type


interface UseRegisterEmailReturn {
  registerEmail: (data: RegisterEmailRequest) => Promise<RegisterEmailResponse | null>;
  isLoading: Ref<boolean>;
  error: Ref<Error | null>;
  data: Ref<RegisterEmailResponse | null>;
}

useMailpulseClient

Access the underlying client directly for advanced use cases.


<script setup lang="ts">
import { useMailpulseClient } from 'mailpulse/vue';
 
const client = useMailpulseClient();
 
const handleClick = async () => {
  const stats = await client.getStats();
  console.log(stats);
};
</script>
 
<template>
  <button @click="handleClick">Fetch Stats</button>
</template>

Complete Example


<script setup lang="ts">
import { provideMailpulse, useStats, useCampaigns } from 'mailpulse/vue';
 
provideMailpulse({
  apiKey: import.meta.env.VITE_MAILPULSE_API_KEY,
});
 
const { data: stats, isLoading: statsLoading } = useStats();
const { data: campaigns, isLoading: campaignsLoading } = useCampaigns();
</script>
 
<template>
  <div v-if="statsLoading || campaignsLoading">
    Loading dashboard...
  </div>
  <div v-else>
    <h1>Email Analytics Dashboard</h1>
 
    <section>
      <h2>Overview</h2>
      <div class="stats-grid">
        <div>Emails: {{ stats?.totalEmails }}</div>
        <div>Opens: {{ stats?.totalOpens }}</div>
        <div>Clicks: {{ stats?.totalClicks }}</div>
        <div>Open Rate: {{ stats?.openRate }}%</div>
      </div>
    </section>
 
    <section>
      <h2>Campaigns ({{ campaigns?.campaigns.length }})</h2>
      <ul>
        <li v-for="c in campaigns?.campaigns" :key="c.id">
          {{ c.name }}
        </li>
      </ul>
    </section>
  </div>
</template>
 
<style scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
</style>

Nuxt 3 Integration

For Nuxt 3, create a plugin:


// plugins/mailpulse.client.ts
export default defineNuxtPlugin(() => {
  // Plugin runs only on client side
});

Then use in your components:


<script setup lang="ts">
import { provideMailpulse, useStats } from 'mailpulse/vue';
 
if (import.meta.client) {
  provideMailpulse({
    apiKey: useRuntimeConfig().public.mailpulseApiKey,
  });
}
 
const { data, isLoading } = useStats();
</script>