Chat APP with Supabase + Vue 3

This is a simple chat app built with Vue 3 and Supabase. It uses the following features:

• Supabase (Authentication, Realtime, Storage, Database)
• Vue 3
• Tailwind CSS
• Vue Router
• Vue Composition API
• Pinia

Getting Started

# Clone the repo
git clone

# Install dependencies
npm install

# Start the dev server
npm run dev

Create a Supabase project and add the URL and anon key to the .env file

VITE_SUPABASE_URL="https://xxxxx.supabase.co"
VITE_SUPABASE_ANON_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

You can find the anon key in the API section of your Supabase project.

Table Structure

First, create a profile table with SQL Editor in your Supabase project.

• Go to the SQL Editor in your Supabase project
• Pick User Managament Starter from the Quick Start section
• Run the SQL query

Then create a table called messages with the following columns:

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  text TEXT NOT NULL,
  user_id TEXT NOT NULL,
  timestamp timestampz default now() NOT NULL
);

Change your Site URL and Redirect URL Authentication > URL Configuration section of your Supabase project.

Deploying

This project is setup to deploy to Vercel. You can deploy it to Vercel by clicking the button below.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

License

This project is licensed under the MIT License - see the LICENSE.md file for details