I have read articles and watched many tutorials on Vue, but this is the first Vue or Nuxt app that I have actually built myself. Nuxt 3 is amazing and definitely worth your time. I learn something new about my old tech stack whenever I build something with a new language, framework, or database. Nuxt 3 is no different. ## TL;DR This is my Firebase Todo app built with Nuxt 3. It does not use any external packages; it uses `template` and `script` tags and is clean and simple. Because the data needs authentication, it does not use SSR. It can be hosted on Cloudflare, Vercel Edge Functions, any Edge Network, and other NodeJS environments. ## Environment Variables First, you must set up your Firebase API keys. Put them in a `.env` file, and create a string from the JSON object. ### .env ```tsx NUXT_PUBLIC_FIREBASE_CONFIG={"apiKey":"...","authDomain":"..."...} ``` Notice the keys have double quotes around them, and there is no semi-colon at the end. ### nuxt.config.ts Next, edit your Nuxt configuration file to grab the *public* Firebase configuration and set it as a variable. ```tsx // export default defineNuxtConfig({ devtools: { enabled: true }, runtimeConfig: { public: { FIREBASE_CONFIG: JSON.parse( process.env.NUXT_PUBLIC_FIREBASE_CONFIG! ), dev: process.env.NODE_ENV !== 'production' } }, css: ['~/assets/css/main.css'], postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }) ``` My app also uses Tailwind, and I created a reusable `dev` variable, but your version may be simpler. ## Firebase Plugin Next, create a Firebase plugin in the `plugins` directory. ### firebase.ts This allows you to reuse your Firebase globals anywhere in your app. By returning the variables, you get the correct types when you use them. ```tsx import { getApps, initializeApp } from "firebase/app" import { getAuth } from "firebase/auth" import { getFirestore } from "firebase/firestore" export default defineNuxtPlugin(() => { const config = useRuntimeConfig() // initialize and login if (!getApps().length) { initializeApp(config.public.FIREBASE_CONFIG) } const auth = getAuth() const db = getFirestore() return { provide: { auth, db } } }) ``` ## User Composable Create a user composable called `user.ts` in the `composables` directory. This is where you put your libraries and custom hooks like in other frameworks. ### Login Functions ```tsx export const loginWithGoogle = async () => { const { $auth } = useNuxtApp() await signInWithPopup($auth, new GoogleAuthProvider()) } export const logout = async () => { const { $auth } = useNuxtApp() await signOut($auth) } ``` Notice you can use the `useNuxtapp()` to get your plugin globals. They will always start with a `$`. You should also store your `UserType` here. ```tsx export type UserType = { displayName: string | null photoURL: string | null uid: string email: string | null } ``` ### User Hook You must create a custom hook to check for a logged-in user. This will subscribe to `onIdTokenChanged`, which is similar to `onAuthStateChanged` but more powerful. ```tsx export const useUser = () => { const { $auth } = useNuxtApp() const user = useState('user', () => null) const initialLoad = useState('user-initial-load', () => true) if (!initialLoad.value) { return user } let unsubscribe: Unsubscribe = () => {} onMounted(() => { initialLoad.value = false unsubscribe = onIdTokenChanged($auth, (_user: User | null) => { if (!_user) { user.value = null return } const { displayName, photoURL, uid, email } = _user user.value = { displayName, photoURL, uid, email } }) }) onUnmounted(unsubscribe) return user } ``` Here, we can store our variables using `useState` instead of `ref`. This is wonderful as it allows us to save and retrieve variables only once. If we call this hook in multiple components without checking for the *first loading instance*, the observable will get reran every time. While our app will still function, it wastes client memory and resources. `useState` just checks for a provider and creates one with the default value if it does not exist. This is extremely unique to Vue. We also have to `unsubscribe` to the observable, a feat most Firebase articles seem to ignore. Again, we want to save our client app’s memory. We are not *watching the effect* of another variable here, so mounting and unmounting are the correct usage. I find the code not as clean, but it is better. ## Home Component Our Home component calls the shared user composable, checks for a user, and allows you to log in or log out depending on the state. ```tsx ``` I prefer using `templates` to check for conditionals or loops when creating an additional `div` is unnecessary. There should be nothing crazy here. ## Profile Component Our profile component is similar and displays the user information when a user is logged in. There is nothing extraordinary here. The user hook *just works* automatically, and you don’t have to think about it. ```tsx ``` ## Todos Composable I also created a todos hook, or composable. It is not shared, but it is dependent on the user. First, we have to set up our types, add a todo, delete a todo, and update a todo. ### Add, Update, Delete ```tsx export const addTodo = async (e: Event) => { const uid = useUser().value?.uid // get and reset form const target = e.target as HTMLFormElement const form = new FormData(target) const { task } = Object.fromEntries(form) // reset form target.reset() if (!uid) { throw 'No user!' } const { $db } = useNuxtApp() setDoc(doc(collection($db, 'todos')), { uid, text: task, complete: false, created: serverTimestamp() }) } export const updateTodo = (id: string, newStatus: boolean) => { const { $db } = useNuxtApp() updateDoc(doc($db, 'todos', id), { complete: newStatus }) } export const deleteTodo = (id: string) => { const { $db } = useNuxtApp() deleteDoc(doc($db, 'todos', id)) } ``` This is all standard Firebase code. Notice you reuse the `$db` from the `useNuxtApp()`. I also find that different Frameworks need a different type for the `event` in a form submit. Here `Event` works. ### Type and snapData I am also reusing my `snapToData` function to get the Todo data correctly. The type is exported as well. ```tsx export interface TodoItem { id: string text: string complete: boolean created: Date uid: string } export const snapToData = ( q: QuerySnapshot ) => { // creates todo data from snapshot if (q.empty) { return [] } return q.docs.map((doc) => { const data = doc.data({ serverTimestamps: 'estimate' }) const created = data.created as Timestamp; return { ...data, created: created.toDate(), id: doc.id } }) as TodoItem[] } ``` ### useTodos This hook creates a `todos` signal and depends on the `user` signal to track whether the user is logged in. We clean up the `unsubscribe` method to keep our memory in check by returning it in `watchEffect`. This also re-runs when the `user` signal changes. ```tsx export const useTodos = () => { const runtimeConfig = useRuntimeConfig() const { $db } = useNuxtApp() const user = useUser() const todos = ref<{ data: TodoItem[] loading: boolean }>({ data: [], loading: true }) const userData = user.value if (!userData) { todos.value.loading = false todos.value.data = [] return todos } watchEffect((onCleanup) => { const unsubscribe = onSnapshot( // query realtime todo list query( collection($db, 'todos'), where('uid', '==', userData.uid), orderBy('createdAt') ), (q) => { // toggle loading todos.value.loading = false // get data, map to todo type const data = snapToData(q) /** * Note: Will get triggered 2x on add * 1 - for optimistic update * 2 - update real date from server date */ // print data in dev mode if (runtimeConfig.public.dev) { console.log(data) } // add to store todos.value.data = data }) onCleanup(unsubscribe) }) return todos } ``` I must admit it is fun ignoring semi-colons in Nuxt, as it can be a waste of hard drive space. I have to be like other Vue developers, after all. ## Todos Component Here, I call the `todos` composable and print them. Signals are way better than observables or svelte stores. ```tsx ``` ## Todo Item Finally, we display the individual to-do items and add buttons to change the data. ```tsx ``` ## About Page I also created a quick about page to fetch data from the server and hydrate it to the client. ### useAbout Here is the composable to get the about data. ```tsx import { doc, getDoc } from "firebase/firestore" type AboutDoc = { name: string description: string } export const useAbout = async () => { // runs on both server and client const runtimeConfig = useRuntimeConfig() const { $db } = useNuxtApp() const aboutSnap = await getDoc( doc($db, '/about/ZlNJrKd6LcATycPRmBPA') ) if (!aboutSnap.exists()) { throw 'Document does not exist!' } const data = aboutSnap.data() if (runtimeConfig.public.dev) { console.log(data) } return data as AboutDoc } ``` ### About Component Secondary fetches will be done on the client after the original page load. If you want to fetch server-only, you must create an endpoint and use `useFetch()` hook instead. ```tsx ``` ## What did I learn? Vue with Nuxt 3 is gorgeous. I found it more similar to AnalogJS than anything else. I love templating and hate JSX, so this was right up my alley. I rarely had to import anything. The developer experience is amazing. I also didn’t have any of the deployment troubles that Angular gave me. I think I love Nuxt 3! J **Repo:** [GitHub](https://github.com/jdgamble555/firebase-nuxt-todo) **Demo:** [Vercel Edge](https://firebase-nuxt-todo.vercel.app/)

Hi {{ user.displayName }}!

{{ data.name }}

Total Tags: 32

Nuxt Todo App with Firebase