Vue.js Integration

Integrate Premonize with your Vue.js application.

Installation

npm install axios
# or
yarn add axios

Composable

// composables/usePremonize.js
import { ref } from 'vue';
import axios from 'axios';

const API_URL = 'https://yourproject.premonize.com/api';

export function useWaitlist() {
  const loading = ref(false);
  const error = ref(null);
  const subscriber = ref(null);

  const subscribe = async (email, name = null, referralCode = null) => {
    loading.value = true;
    error.value = null;

    try {
      const { data } = await axios.post(`${API_URL}/waitlist/submit`, {
        email,
        name,
        referral_code: referralCode,
      });

      subscriber.value = data;
      return data;
    } catch (err) {
      error.value = err.response?.data?.message || 'An error occurred';
      throw err;
    } finally {
      loading.value = false;
    }
  };

  return { subscribe, loading, error, subscriber };
}

Waitlist Component

<!-- components/WaitlistForm.vue -->
<template>
  <div class="waitlist-form">
    <div v-if="subscriber" class="success">
      <h3>You're on the list!</h3>
      <p>Position: #{{ subscriber.position }}</p>
      <p>Share your link:</p>
      <input
        type="text"
        :value="subscriber.share_url"
        readonly
        @click="$event.target.select()"
      />
    </div>

    <form v-else @submit.prevent="handleSubmit">
      <input
        v-model="email"
        type="email"
        placeholder="Enter your email"
        required
      />
      <button type="submit" :disabled="loading">
        {{ loading ? 'Joining...' : 'Join Waitlist' }}
      </button>
      <p v-if="error" class="error">{{ error }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useWaitlist } from '@/composables/usePremonize';

const email = ref('');
const { subscribe, loading, error, subscriber } = useWaitlist();

const handleSubmit = async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const referralCode = urlParams.get('ref');

  await subscribe(email.value, null, referralCode);
};
</script>

<style scoped>
.waitlist-form {
  max-width: 400px;
  margin: 0 auto;
}

.success {
  text-align: center;
  padding: 2rem;
  background: #f0fdf4;
  border-radius: 12px;
}

.error {
  color: #dc2626;
  margin-top: 0.5rem;
}
</style>

Changelog Component

<!-- components/Changelog.vue -->
<template>
  <div class="changelog">
    <div v-if="loading">Loading...</div>

    <article v-for="post in posts" :key="post.id" class="post">
      <span :class="['badge', post.type]">{{ post.type }}</span>
      <h2>{{ post.title }}</h2>
      <time>{{ formatDate(post.published_at) }}</time>
      <div v-html="post.content"></div>
    </article>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const props = defineProps({
  projectSlug: String,
});

const posts = ref([]);
const loading = ref(true);

const formatDate = (date) => new Date(date).toLocaleDateString();

onMounted(async () => {
  try {
    const { data } = await axios.get(
      `https://${props.projectSlug}.premonize.com/api/changelog/posts/${props.projectSlug}`
    );
    posts.value = data.posts;
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
}

.badge.new { background: #dcfce7; color: #16a34a; }
.badge.improvement { background: #dbeafe; color: #2563eb; }
.badge.fix { background: #fef3c7; color: #d97706; }
</style>