VueStarter

Appearance

Setup ​

  • Clone the template, create a Supabase project, connect everything, and verify it works

This step is entirely manual. No Claude prompts yet — we are setting up the environment.

1. Clone the Template ​

Clone the app-starter repo and install dependencies:

bash
git clone https://github.com/Loqode/vue-starter.git my-app
cd my-app
npm install

2. Create a Supabase Project ​

Go to supabase.com and create a new project.

Pick a name and a strong database password. It can take a minute or two for the project to finish spinning up — wait until the dashboard shows it as ready before continuing.

Once ready, grab your credentials:

  • Project URL — copy from the project dashboard (starts with https://)

  • Publishable key — go to Project Settings → API and copy the anon public key

  • Secret key — on the same page, copy the service_role key (click to reveal)

3. Environment Variables ​

Copy the example env file and fill in your Supabase credentials:

bash
cp .env.example .env

Open .env and fill in:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-anon-key
SUPABASE_SECRET_KEY=your-service-role-key

4. Connect MCPs ​

Claude Code needs access to three MCP servers. Run these commands in your terminal:

Nuxt MCP:

bash
claude mcp add --transport http nuxt-remote https://nuxt.com/mcp

Nuxt UI MCP:

bash
claude mcp add --transport http nuxt-ui-remote https://ui.nuxt.com/mcp

Supabase MCP and Agent Skills:

  1. In your Supabase project, click the green Connect button in the top toolbar

  2. Select MCP

  3. Make sure the client is set to Claude Code

  4. Under Step 1 — Add MCP server, copy the command and run it in your terminal. It looks something like:

bash
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=abc123"
  1. On the same page, install the agent skills:
bash
npx skills add supabase/agent-skills

5. Start Claude Code and Authenticate ​

Start Claude Code in your project directory:

bash
claude

Once Claude Code is running:

  1. Type /mcp and press Enter
  2. Select Supabase, press Enter
  3. Select authenticate, press Enter
  4. Complete the authentication flow in your browser

The Supabase MCP must be authenticated before you can run migrations in the next step.

Verify all MCP connections are working by asking Claude: "List all tables in my Supabase database to confirm the MCP connection is working."

6. Run Existing Migrations ​

The template has database migrations that need to be applied to your fresh Supabase project. Ask Claude:

txt
Use the Supabase MCP to apply the migration in supabase/migrations/00001_initial_schema.sql.

7. Disable Email Confirmation (Development) ​

Supabase's default email provider has a limit of 2 confirmation emails per hour, which will slow you down during development. Turn it off for now:

  1. Go to Authentication → Providers → Email in your Supabase dashboard
  2. Disable Confirm email
  3. Click Save

You can re-enable this once you've set up a custom SMTP provider, or before going to production.

8. Start the Dev Server ​

bash
npm run dev

Open http://localhost:3000. You should see the login page.

9. Verify Everything Works ​

  1. Click "Sign up" and create an account
  2. You should be logged in immediately (email confirmation is off)
  3. You should hit the onboarding page — enter a team name and your display name
  4. You should land on the dashboard
  5. Check that the sidebar shows Dashboard and Settings
  6. Go to Settings → Members and verify you are listed as the owner

If all of that works, you are ready to start building.

10. Push to GitHub ​

Push your project to GitHub so you have version control from the start:

  1. Open GitHub Desktop
  2. Click Add Existing Repository and select your project folder
  3. Follow the prompts to commit to master and publish the repository

Next: Deploy to Cloudflare