Auth UI Vue

Pre-built auth widgets to get started in minutes.

Preview

Introduction

auth-ui-vue is a pre-built, customizable Vue component for authenticating users base on supabase

Customizable authentication UI component with custom themes and extensible styles to match your brand and aesthetic.

Installation

To start using the library, install it in your project:

pnpm install @nuxtbase/auth-ui-vue
or
yarn add @nuxtbase/auth-ui-vue

Usage

For Vue 3

<!-- App.vue -->
<template>
  ...
  <Auth
    :appearance="{
      theme: ThemeSupa
    }"
    :supabaseClient="supabaseClient"
  />
  ...
</template>

<script setup lang="ts">
  // Import predefined theme
  import { ThemeSupa } from '@supabase/auth-ui-shared'
  import { createClient } from '@supabase/supabase-js'

  import { Auth } from '@nuxtbase/auth-ui-vue'

  const supabaseClient = createClient(
    '<INSERT PROJECT URL>',
    '<INSERT PROJECT ANON API KEY>'
  )
</script>

For Nuxt 3

Define a nuxt plugin

// plugins/auth-ui-vue.client.ts

Inspiration

• @supabase/auth-ui-react - Pre-built Auth UI for React.

License

MIT @xiaoluoboding