I picked up most of my soft/hardware troubleshooting skills in the US Army.
A decade of Java development drove me to operations, scaling infrastructure
to cope with the thundering herd. Engineering coach and CTO of Teleclinic.
Having a newsletter signup feature on our website is an essential part of our digital strategy. It enables us to expand our email list and keep our subscribers updated with our latest products, stories, blogs, new features, and other business developments. This feature also helps us market our products to a sizable and diverse consumer base. In this article, we will explore what Firebase and Cloud Firestore are, and how to create a powerful newsletter signup page using Vue, Firebase, and Cloud Firestore.
Prerequisites
Before proceeding with this article, ensure you meet the following requirements:
Check out the full code on
Github
Firebase
is a backend cloud computing service and application development platform created by Google. It provides developers with a suite of tools for building and managing applications. Firebase includes various features, such as authentication, cloud storage, and a real-time database for a range of applications—including Android, JavaScript, Node.js, PHP, C++, and Java.
Cloud Firestore
is an advanced, cloud-hosted NoSQL database offered by Firebase and Google Cloud. Designed for scalability and high-performance querying, it serves mobile, web, and server development. The database keeps data synchronized across client apps through real-time listeners. Additionally, it offers offline support for mobile and web applications, enabling the design of performant applications independent of internet connectivity. Cloud Firestore is accessible via native SDKs for Apple, web, and Android apps.
Create Our Firebase Project
After meeting the prerequisites, the next step is to create a new Firebase project. To do so, visit or log in to the
Firebase console website
. Click on the
Add Project
button.
addDoc
} from 'firebase/firestore';
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// import { getAnalytics } from 'firebase/analytics';
import { ref } from 'vue';
const firebaseConfig = {
// Paste your Your web app's Firebase configuration here
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
You’ll notice a gap in the code; this is where we’ll insert the configuration file we copied. To obtain this file, click on
Project Overview
in the menu and then select
Project Settings
from the dropdown. This will navigate us to a page where we can copy our config file.
<template>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Welcome to Trackee Newsletter</h1>
<p class="leading-relaxed mt-4">Join our weekly newsletter. You'll also get some of our finest posts every week.
<form class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 add"
id="app">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" name="name"
class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" >
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" name="email"
class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
<button
class="text-white btn-bg border-0 py-2 px-8 focus:outline-none rounded text-lg">Send</button>
</form>
</section>
</template>
A diagram illustrating what our application will look like is available for reference.
<template>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Welcome to Trackee Newsletter</h1>
<p class="leading-relaxed mt-4">Join our weekly newsletter. You'll also get some of our finest posts every week.
<form class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 add"
id="app">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input ref="name" type="text" name="name"
class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" >
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input ref="email" type="email" name="email"
class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
<button @click.prevent="createNewSuscriber"
class="text-white btn-bg border-0 py-2 px-8 focus:outline-none rounded text-lg">Send</button>
</form>
</section>
</template>
createNewSubscriber: function () {
addDoc(collection(db, 'EmailCollection'), {
name: this.$refs.name.value,
email: this.$refs.email.value,
data: () => {
return {
subscribers: ref([]),
</script>
In summary, Vue combined with Firebase Cloud Firestore provides a robust framework for building dynamic applications. Firebase Cloud Firestore offers a powerful server database system for storing and managing our data. In this tutorial, we explored both Firebase and Cloud Firestore, learning how to create an integrated application.
