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
# 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.
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.
This project is setup to deploy to Vercel. You can deploy it to Vercel by clicking the button below.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
This project is licensed under the MIT License - see the LICENSE.md file for details