WiFi Plug Comments - Answer Overflow

WiFi Plug

•Created by WiFi Plug on 4/30/2025 in #❓・help

supabase nuxt confirm page on email confirmation

@kapa.ai yeah that still didn't work, so the link i get sent to when clicking the confirmation email link in my email is my root page localhost:3000 rather than the redirect so could that be a part of it? but why does it send me to my root page and not the confirm page?

15 replies

NNuxt

•Created by WiFi Plug on 4/30/2025 in #❓・help

supabase nuxt confirm page on email confirmation

@kapa.ai so my email template is set to the default {{ .confirmationemail }} my site url in supabase dashboard is set to http://localhost:3000 and my redirect urls is set to http://localhost:3000/auth/confirm my nuxt.config.ts is set to

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    '@nuxt/ui-pro',
    '@nuxt/image',
    '@nuxtjs/supabase',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
  ],

  imports: {
    dirs: ['shared/**'],
  },
  devtools: { enabled: true },

  css: ['~/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',

  nitro: {
    imports: {
      dirs: ['shared/**'],
    },
  },

  eslint: {
    config: {
      stylistic: true,
    },
  },

  supabase: {
    redirectOptions: {
      login: '/',
      callback: '/auth/confirm', // This should match your confirm page
      exclude: ['/*'],
    },
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    '@nuxt/ui-pro',
    '@nuxt/image',
    '@nuxtjs/supabase',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
  ],

  imports: {
    dirs: ['shared/**'],
  },
  devtools: { enabled: true },

  css: ['~/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-11-01',

  nitro: {
    imports: {
      dirs: ['shared/**'],
    },
  },

  eslint: {
    config: {
      stylistic: true,
    },
  },

  supabase: {
    redirectOptions: {
      login: '/',
      callback: '/auth/confirm', // This should match your confirm page
      exclude: ['/*'],
    },
  },
})

and i have a page created at pages/auth/confirm.vue with

<script setup lang="ts">
const user = useSupabaseUser()
const redirectInfo = useSupabaseCookieRedirect()

watch(
  user,
  () => {
    if (user.value) {
      // Get redirect path, and clear it from the cookie
      const path = redirectInfo.pluck()
      // Redirect to the saved path, or fallback to home
      return navigateTo(path || '/')
    }
  },
  { immediate: true }
)
</script>

<template>
  <div>Waiting for login...</div>
</template>

<script setup lang="ts">
const user = useSupabaseUser()
const redirectInfo = useSupabaseCookieRedirect()

watch(
  user,
  () => {
    if (user.value) {
      // Get redirect path, and clear it from the cookie
      const path = redirectInfo.pluck()
      // Redirect to the saved path, or fallback to home
      return navigateTo(path || '/')
    }
  },
  { immediate: true }
)
</script>

<template>
  <div>Waiting for login...</div>
</template>

so why might it not be working?

15 replies

NNuxt

•Created by WiFi Plug on 4/29/2025 in #❓・help

multiple modals how to be more efficient loading them

@kapa.ai so i should keep my v-model inside the individual components but also have the v-if in my layout where i load the modals?

20 replies

NNuxt

•Created by WiFi Plug on 4/29/2025 in #❓・help

multiple modals how to be more efficient loading them

@kapa.ai so what does the conditional v-if achieve over using lazy? i thought lazy would only render when needed? as inside my register modal component for example i have "<template>   <UModal v-model="uiStore.isRegisterModalOpen" prevent-close>"

20 replies

NNuxt

•Created by WiFi Plug on 4/29/2025 in #❓・help

multiple modals how to be more efficient loading them

so what does the conditional v-if achieve over using lazy? i thought lazy would only render when needed? as inside my register modal component for example i have "<template>   <UModal v-model="uiStore.isRegisterModalOpen" prevent-close>"

20 replies

NNuxt

•Created by WiFi Plug on 4/29/2025 in #❓・help

multiple modals how to be more efficient loading them

@kapa.ai so i have a pinia ui store which stores which modal is currently open if any and my modals listen to that to be opened or closed. i do use nuxt ui but is my approach correct as im a beginner. and if not putting the modals in my default layout then where can i initialise them? i thought i could use the lazy prefix as a good solution?

20 replies

NNuxt