DEV Community

Cover image for Nuxt 3, Tailwind, and Supabase Crash Course
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

Nuxt 3, Tailwind, and Supabase Crash Course

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:

Placekitten

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

Nuxt Supabase

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

Nuxt Tailwind

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

Nuxt Image

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

Supabase Dashboard

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>
Enter fullscreen mode Exit fullscreen mode

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

yarn install
Enter fullscreen mode Exit fullscreen mode

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

yarn dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'],
})
Enter fullscreen mode Exit fullscreen mode

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']
    }
})
Enter fullscreen mode Exit fullscreen mode

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

SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imh6a3JmbnJ0aGl2dGd5d3dmbXp3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTAzNjQ5NjYsImV4cCI6MTk2NTk0MDk2Nn0.jnrnzs8luCdj2XyhaN2QDp8O6dGDgDOV9zUGN12X0fw
SUPABASE_URL=https://hzkrfnrthivtgywwfmzw.supabase.co
Enter fullscreen mode Exit fullscreen mode

You can get this credentials here in Supabase settings:

Supabase credentials

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

CatImage

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.

Vercel

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

Deploying the project

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

Environment Variables

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

App deployed

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 :)

Latest comments (4)

Collapse
 
isidromar95 profile image
Isidro Martínez

How can I add an Interface type to data: images? I tried but i can't figure out

Collapse
 
kiwicopple profile image
Copple

great write up, thanks Jakub 💚

Collapse
 
alexandergekov profile image
Alexander Gekov

Well-researched and easy to follow article, thanks!

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski

Thanks Buddy! Cant wait for more articles from you side! Tag me in any of them if you would like me feedback 😉