Nuxt + Supabase = Technology Stack of Dreams 🚀

I started my official developer career as a Frontend Developer few years ago. Then, I was developing the applications in Vue 2 (yes yes, dark times :D). I didn't have that much experience in backend development (more or less, my experience could be summarized that I knew how to run a simple Express server so not much).

At certain point, I realized that I need to add some backend knowledge to my technology stack in order to become a better developer in general and to allow me to build applications easily by myself. I started learning Node.js and Express but there were so many topics that I needed to cover like Database, Authentication, Cache, File Storage, Hosting, etc that I decided to give up and search for solutions that would enable me to have this functionality but in a easier way.

Then, I found out about Supabase! And oh boy, Supabase basically solved all the issues I had back then as it allows to cover all these backend functionalities directly from the frontend in an easy and developer friendly way.

And then, I started diving more into Nuxt (especially most recent Nuxt 3) and oh boy (x2) I think I have found a stack of dreams 🎉

What is Nuxt?

If you are not familiar with Nuxt yet, it is a framework that allows you to build your next Vue.js application with confidence. An open source framework under MIT license that makes web development simple and powerful.

It comes with several goodies out of the box like following:

• Fast and Furious - Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building.
• On-demand Rendering - Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR. Build any kind of website or web application with optimized performance in mind.
• SEO & Web Vitals - By leveraging server-side rendering, ESM format and optimized images, Nuxt websites are indexable by search engines while giving the feeling of an app to the end-users.
• Plug & Play - Unlock features by creating folders and files with the most intuitive directory structure made for developers and teams.
• Automation - Repetitive tasks are automated: auto-imports, code-splitting, typings, minification, bundling for production. and more.
• Batteries Included - Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more.

And many more!

Take a look at the following video by Fireship about Nuxt:

Interesting fact - in this video, one of the modules I created for Nuxt is featured - https://nuxt-medusa.vercel.app/

So just to summarize, you get a lot of amazing features out of the box and future proof architecture that can scale easily!

What is Supabase?

Supabase is an open source Firebase alternative.
Start your project with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, Storage, and Vector embeddings.

• Database - Every project is a full Postgres database, the world's most trusted relational database.
• Authentication - Add user sign ups and logins, securing your data with Row Level Security.
• Storage - Store, organize, and serve large files. Any media, including videos and images.
• Edge Functions - Write custom code without deploying or scaling servers.
• Realtime - Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database.
• Vector - Integrate your favorite ML-models to store, index and search vector embeddings.

And many more!

Check out the following video for short intro to what Supabase is by Fireship

Next, let's take a look how we can use Supabase in Nuxt.

Working with Supabase in Nuxt

First install the module like following:

yarn add --dev @nuxtjs/supabase

Then, register it in the modules array in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})

Next, add the required environment variables:

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

And that's it! You can now start using the module like following:

<script setup lang="ts">
const client = useSupabaseClient()
const { data: restaurant } = await useAsyncData('restaurant', async () => {
  const { data } = await client.from('restaurants').select('name, location').eq('name', 'My Restaurant Name').single()
  return data
})
</script>

The above example shows the usage of Supabase on the client side, but you can also use it very easily on the underlying server side (in Nitro) like explained here and like following:

First, let's create a new server endpoint

import { serverSupabaseClient } from '#supabase/server'
export default eventHandler(async (event) => {
  const client = serverSupabaseClient(event)
  const { data } = await client.from('libraries').select()
  return { libraries: data }
})

And then, just call this endpoint from your frontend:

const fetchLibrary = async () => {
  const { libraries } = await $fetch('/api/libraries')
}

As you can see above, you can very easily work with Supabase in Nuxt in both client and server side!

Why is Nuxt + Supabase a stack of dreams?

Nuxt gives you a framework that makes working with all types of web applications really easy. Thanks to Nitro presets, you can easily host your application on all modern hosting providers like Netlify, Vercel, Heroku, etc. It also comes with all the goodies that you may want in your app. This is currently my go to in terms for building new projects.

In terms of Supabase, it is basically a tool that allows frontend developers to build fullstack web applications very easily without extensive backend knowledge.

What else you would want?

And what's better, both these tools are Open Source so you can use them for free, host them easily, and utilize the whole bunch of community modules and plugins!

Check out the following demo application of Nuxt & Supabase made by @atinux 🚀

Summary

And that's it! I hope that after reading this article I made some interesting points that would convince you why I think that Nuxt & Supabase is a perfect technology stack of dreams! Use it to build your next projects and let me know about the result! ⚡️

Comments

[Kraig Burrows]

Do you have an example of how you would handle extra user data with prisma and supabase in nuxt? Would it be as simple as creating an extra table like profile and linking the user id to that? how would you go about ensuring the data if an entry were to be deleted stays pruned and in sync?

[Jakub Andrzejewski]

Hey, I unfortunately do not have experience with Prisma so cannot really help with that. But from what you mention, I think this could be a good solution to go for an extra table with linking the data. For the data in sync, I would recommend utilize some kind of a webhook of Pub/Sub pattern where you would be notified about changes in one place and can react in another (for example with Nuxt SSR endpoints that could handle the logic after receiving a POST request)

[kiruba selvi]

@jacobandrewsky Somehow while trying to use supabase,my root route is always " localhost:3000/login " and I could not fetch the data ,it always return empty array

[Jakub Andrzejewski]

Hmm, that is strange, have you tried maybe a different browser or clearing page storage like cache or cookies?

I dont really know what could be causing it. Maybe you could also submit an issue in Nuxt Cloudinary repository

[kiruba selvi]

@jacobandrewsky I set redirect to false and turned off row-level security...It works now, Thank you! 😊