leighayanid / supkit-template

Vue 3 + Vite + TailwindCSS 3 + Supabase starter template

⚡ SupKit

⚡ Starter template for Vue 3, Vite, Tailwind CSS and Supabase

🧪 Working in Progress

🖥 Online Preview

App Features

• 🔐 Supabase Auth
• 🔥 Supabase Database
• ⚡️ Supabase Realtime Subscription
• 💾 Supabase Storage
• 👱 Profile Management
• 🗒️ CRUD for Private Notes

Project Features

• 💚 Vue 3 - Composition API, components auto importing, modules, etc.

• ⚡️ Vite - Instant HMR

• 🎨 Tailwind CSS - Utility CSS Framework

• 😃 Use icons from any icon sets in HeroIcons

• 🔥 The <script setup> syntax

• 🍍 State Management via Pinia

• 📥 APIs auto importing - for Composition API, VueUse and custom composables.

• ⚡️ Supabase - Open source Firebase alternative

Plugins

Vue Modules

• VueUse - collection of useful composition APIs
• Pinia - intuitive, type safe, light and flexible Store for Vue.
• VueFinalModal - tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
• Vue-toaster - toast notification plugin for vue 3
• Vee-validate - form validation for Vue
• yup - object schema validation
• Vitest - Vue 3 testing framework powered by Vite
• supabase-js - Supabase JS Client

IDE

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

Try it now

Online

GitHub Template

Create a repo from this template on GitHub.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

SUPABASE_URL

SUPABASE_KEY

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit leighayanid/supkit-template <your-app-name>
cd <your-app-name>
npm i or yarn

Create a new Supabase project.

- Copy and paste the `SUPABASE_URL` and `SUPABASE_KEY` inside `.env` file.

- Go to project console.

- Open the query page.

- Create a new query.

- Copy the `schema.sql` inside the project folder and paste inside the Supabase SQL editor.

- Finally run the script.

That's it! You can now run the app and see it in action.

If you like it and find it useful, please star the repo.

Created by leighayanid ❤️

Readme template by antfu