Vue

Utilisez le SDK Mailpulse avec Vue 3 en utilisant les composables intégrés.

Installation


npm install mailpulse vue

Configuration du Provider

Utilisez provideMailpulse dans votre composant racine pour rendre le client disponible à tous les composants enfants :


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

Options de Configuration

Option	Type	Requis	Description
`apiKey`	`string`	Oui	Votre clé API Mailpulse
`apiUrl`	`string`	Non	URL API personnalisée

useStats

Récupérer les statistiques globales de suivi.


<script setup lang="ts">
import { useStats } from 'mailpulse/vue';
 
const { data, isLoading, error, refetch } = useStats();
</script>
 
<template>
  <div v-if="isLoading">Chargement...</div>
  <div v-else-if="error">Erreur : {{ error.message }}</div>
  <div v-else>
    <p>Total Emails : {{ data?.totalEmails }}</p>
    <p>Taux d'Ouverture : {{ data?.openRate }}%</p>
    <p>Taux de Clic : {{ data?.clickRate }}%</p>
    <button @click="refetch">Actualiser</button>
  </div>
</template>

Type de Retour


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

useCampaigns

Récupérer toutes les campagnes.


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

useCampaign

Récupérer une campagne spécifique avec les détails.


<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">Chargement...</div>
  <div v-else-if="error">Erreur : {{ error.message }}</div>
  <div v-else>
    <h1>{{ data?.name }}</h1>
    <p>Emails : {{ data?.stats.totalEmails }}</p>
    <p>Taux d'Ouverture : {{ data?.stats.openRate }}%</p>
 
    <h2>Emails</h2>
    <ul>
      <li v-for="email in data?.emails" :key="email.id">
        {{ email.subject }} - {{ email.opens }} ouvertures
      </li>
    </ul>
  </div>
</template>

Paramètres

Paramètre	Type	Description
`campaignId`	`string`	ID de la campagne à récupérer

useCampaignStats

Récupérer des analyses détaillées de la campagne avec des données chronologiques.


<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">Chargement...</div>
  <div v-else-if="error">Erreur : {{ error.message }}</div>
  <div v-else>
    <h1>{{ data?.campaign.name }}</h1>
    <p>Période : {{ data?.period.start }} - {{ data?.period.end }}</p>
 
    <h2>Stats</h2>
    <p>Taux d'Ouverture : {{ data?.stats.openRate }}%</p>
    <p>Taux de Clics par Ouverture : {{ data?.stats.clickThroughRate }}%</p>
 
    <h2>Répartition Journalière</h2>
    <div v-for="day in data?.openAndClicks" :key="day.date">
      {{ day.date }}: {{ day.opens }} ouvertures, {{ day.clicks }} clics
    </div>
 
    <h2>Meilleurs Liens</h2>
    <div v-for="link in data?.topLinks" :key="link.url">
      {{ link.url }}: {{ link.clicks }} clics
    </div>
  </div>
</template>

Paramètres

Paramètre	Type	Description
`campaignId`	`string`	ID de la campagne
`options.period`	`string`	Filtre de période (`7d`, `30d`, `90d`, ou plage de dates)

useRegisterEmail

Enregistrer un email pour le suivi (composable de mutation).


<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: 'Bienvenue !',
    htmlContent: '<html>...</html>',
    campaignId: 'my-campaign',
  });
 
  if (result) {
    console.log('ID de Suivi :', result.emailTrackingId);
    console.log('URL du Pixel :', result.pixelUrl);
  }
};
</script>
 
<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit" :disabled="isLoading">
      {{ isLoading ? 'Enregistrement...' : 'Enregistrer Email' }}
    </button>
    <p v-if="error">Erreur : {{ error.message }}</p>
    <p v-if="data">Enregistré ! ID : {{ data.emailTrackingId }}</p>
  </form>
</template>

Type de Retour


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

useMailpulseClient

Accéder directement au client sous-jacent pour des cas d’utilisation avancés.


<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">Récupérer Stats</button>
</template>

Exemple Complet


<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">
    Chargement du tableau de bord...
  </div>
  <div v-else>
    <h1>Tableau de Bord Analytics Email</h1>
 
    <section>
      <h2>Aperçu</h2>
      <div class="stats-grid">
        <div>Emails : {{ stats?.totalEmails }}</div>
        <div>Ouvertures : {{ stats?.totalOpens }}</div>
        <div>Clics : {{ stats?.totalClicks }}</div>
        <div>Taux d'Ouverture : {{ stats?.openRate }}%</div>
      </div>
    </section>
 
    <section>
      <h2>Campagnes ({{ 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>

Intégration Nuxt 3

Pour Nuxt 3, créez un plugin :


// plugins/mailpulse.client.ts
export default defineNuxtPlugin(() => {
  // Le plugin ne s'exécute que côté client
});

Puis utilisez-le dans vos composants :


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