Jakub Andrzejewski

Posted on Feb 20, 2023 • Edited on Sep 11, 2023

Nuxt 3, Tailwind, and Supabase Crash Course

#vue #tailwindcss #javascript #webdev

I really enjoyed building apps with Nuxt. It is currently my favourite web framework with tons of modules, plugins, and configuration options.

In this article, I will be building a simple Cat Image Gallery with Nuxt 3, Tailwind, and Supabase . Finally, we will deploy our app to Vercel so that it is accessible from anywhere around the world.

This written version of the course is also available as a video tutorial on my YouTube channel that you can check out below:

All the code from this tutorial is available in following GitHub repository:

https://github.com/Baroshem/nuxt3-tailwind-supabase

Technology Stack

Before we jump into an actual code, let's talk briefly about our technology stack.

We will be using cat images from the Placekitten API below:

For the connection to Supabase, we will be using an official Nuxt integration module:

For styling, I will be also using an official Nuxt Tailwind module:

And for image optimization, the official Nuxt module as well:

I have already added three records to Supabase table that I will fetch for this tutorial:

Let's now go to the code to see how we can build our application with previously mentioned technologies:

Code

I have generated a simple Nuxt 3 project using following command:



npx nuxi init <project-name>

Then I have opened the project in my IDE and installed all the dependencies by using this command:



yarn install

To see if it works correctly, let's just run the application with following command:



yarn dev

If installation and build was successful, we should see a nice looking Nuxt Hello World page once we visit http://localhost:3000.

Now, let's install all required modules (Supabase, Tailwind, Image):



yarn add --dev @nuxt/image-edge @nuxtjs/tailwindcss @nuxtjs/supabase

And next, let's add them to modules section in nuxt.config.ts file:



// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: ['@nuxtjs/supabase', '@nuxtjs/tailwindcss', '@nuxt/image-edge'],
})

In order to have optimized images, you should add following image configuration object as instructed here:



// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: ['@nuxtjs/supabase', '@nuxtjs/tailwindcss', '@nuxt/image-edge'],
    image: {
        domains: ['placekitten.com']
    }
})

Also, don't forget about .env file for Supabase:



SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imh6a3JmbnJ0aGl2dGd5d3dmbXp3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTAzNjQ5NjYsImV4cCI6MTk2NTk0MDk2Nn0.jnrnzs8luCdj2XyhaN2QDp8O6dGDgDOV9zUGN12X0fw
SUPABASE_URL=https://hzkrfnrthivtgywwfmzw.supabase.co

You can get this credentials here in Supabase settings:

Now, let's create CatImage.vue and CatImageGallery.vue components:



<template>
    <div class="flex flex-wrap w-1/3">
      <div class="w-full p-1 md:p-2">
        <NuxtImg
          class="block object-cover object-center w-full h-full rounded-lg"
          :alt="alt"
          format="webp"
          :src="src" />
      </div>
    </div>
  </template>

  <script setup lang="ts">
  const props = defineProps({
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      required: true,
    }
  })
  </script>

As you can see, it is a really simple component that just displays an image by using NuxtImg component based on the passed props.

Next, let's create a CatImageGallery component that will be used to display a list of Cat Images based on props.



<template>
    <section class="overflow-hidden text-gray-700 ">
      <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32">
        <div class="flex flex-wrap -m-1 md:-m-2">
          <cat-image
            v-for="image in images"
            :key="image.id"
            :alt="image.title"
            :src="image.src"
          />
        </div>
      </div>
    </section>
  </template>

  <script setup lang="ts">
  const props = defineProps({
    images: {
      type: Array,
      required: true,
    },
  })
  </script>

Nothing crazy here as well. Let's replace app.vue content with the following:



<template>
  <div>
    <CatImageGallery :images="images"/>
  </div>
</template>

<script setup lang="ts">
const client = useSupabaseClient()
const { data: images } = await useAsyncData('images', async () => client.from('images').select('*').order('created_at'), { transform: result => result.data })
</script>

Let's stop for a second here to discuss the content of script tag. We are using useSupabaseClient composable to initialize the Supabase client.

Then, we are calling Nuxt useAsyncData where we are fetching results from Supabase in a SQL like way (SELECT * FROM images ORDER BY created_at). Finally, we are also transforming the response object format so that it is easier to work with.

After switching to the browser, you should see the following result:

Deploying to Vercel

As our final step here, let's deploy our application to Vercel so that it is accessible from anywhere around the world.

After selecting the project, we are asked to select configuration. In our case, the default one will work just fine:

We only need to add the environment variables so that the deployed application will have access to them:

If everything went smoothly, we should see the following result in the browser:

Summary

And that's it! You have just built a simple Cat Image Gallery with Nuxt 3, Tailwind, and Supabase! Let me know in the comments what topics you would like me to cover next :)