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 :)
Top comments (4)
great write up, thanks Jakub 💚
Well-researched and easy to follow article, thanks!
Thanks Buddy! Cant wait for more articles from you side! Tag me in any of them if you would like me feedback 😉
How can I add an Interface type to
data: images
? I tried but i can't figure out