Project 14: Newsletter Form

Vue Engineer

Builds on these lessons

Component Task

Objective

A composable is a plain function that uses Vue's reactivity APIs and returns reactive state plus functions to change it — extracting logic out of a component so it can be reused across several.

You're building a newsletter signup.

Task: write a useSubscription composable returning email, subscribed, and a subscribe function, consumed by a NewsletterForm component.

Component.vue

<!-- useSubscription.js -->
import { ref } from 'vue';

export function useSubscription() {
  const email = ref('');
  const subscribed = ref(false);

  function subscribe() {
    subscribed.value = true;
  }

  return { email, subscribed, subscribe };
}

<!-- NewsletterForm.vue -->
<script setup>
import { useSubscription } from './useSubscription';

const { email, subscribed, subscribe } = useSubscription();
</script>
<template>
  <input v-model="email" placeholder="you@example.com">
  <button @click="subscribe">Subscribe</button>
  <p v-if="subscribed">Thanks for subscribing!</p>
</template>

* Hint: Correct characters turn green, incorrect ones turn red.

Build Output

🟢

Build your component to see the result

← Previous Next →