pearbender
pearbender
Explore posts from servers
NNuxtCDCloudflare Developers
PostsComments
NNuxt
Created by pearbender on 4/27/2025 in #❓・help
disable hamburger menu
the answer is <UHeader title="App" :toggle="false">
5 replies
NNuxt
Created by pearbender on 4/27/2025 in #❓・help
User menu
@kapa.ai OK, this is working 
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userPicture" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'
const auth0 = useAuth0()

const userPicture = computed<string>(() => {
  return auth0?.user?.value.picture ?? ''
})

const logout = computed<(() => void)>(() => {
  return auth0?.logout ?? (() => {})
})

const items = computed(() => [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[])
</script>
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userPicture" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'
const auth0 = useAuth0()

const userPicture = computed<string>(() => {
  return auth0?.user?.value.picture ?? ''
})

const logout = computed<(() => void)>(() => {
  return auth0?.logout ?? (() => {})
})

const items = computed(() => [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[])
</script>
but on the server side before a picture is avialble i want to display the user icon
20 replies
NNuxt
Created by pearbender on 4/27/2025 in #❓・help
User menu
@kapa.ai How about now? it's still not working 
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userPicture" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

const userPicture = ref<string>('')
const logout = ref<(() => void)>(() => {})

if (import.meta.client) {
  const auth0 = useAuth0()
  userPicture.value = auth0.user?.picture ?? ''
  logout.value = auth0.logout
}

const items = [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[]
</script>
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userPicture" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

const userPicture = ref<string>('')
const logout = ref<(() => void)>(() => {})

if (import.meta.client) {
  const auth0 = useAuth0()
  userPicture.value = auth0.user?.picture ?? ''
  logout.value = auth0.logout
}

const items = [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[]
</script>
20 replies
NNuxt
Created by pearbender on 4/27/2025 in #❓・help
User menu
@kapa.ai why doesn't this work 
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userImage" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

const userPicutre = ref<string>('')
const logout = ref<(() => void)>(() => {})

if (import.meta.client) {
  const auth0 = useAuth0()
  userPicutre.value = auth0.user?.picture ?? ''
  logout.value = auth0.logout
}

const items = [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[]
</script>
<template>
  <UApp>
    <UHeader title="App">
      <template #right>
        <UDropdownMenu :items="items" :ui="{ content: 'w-48' }">
          <UAvatar :src="userImage" size="md" alt="User menu" />
        </UDropdownMenu>
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>
  </UApp>
</template>

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue'

const userPicutre = ref<string>('')
const logout = ref<(() => void)>(() => {})

if (import.meta.client) {
  const auth0 = useAuth0()
  userPicutre.value = auth0.user?.picture ?? ''
  logout.value = auth0.logout
}

const items = [
  {
    label: 'Logout',
    icon: 'i-lucide-log-out',
    onSelect: () => {
      logout.value({
        returnTo: window.location.origin,
      })
    }
  }
] satisfies DropdownMenuItem[]
</script>
20 replies
NNuxt
Created by pearbender on 4/27/2025 in #❓・help
User menu
@kapa.ai the icon should be able to be set to a picture such as the google account picture from auth0
20 replies
NNuxt
Created by Hùng Lê on 4/14/2025 in #❓・help
show me how to make dark mode for nuxt3 with ssr = true
@kapa.ai Hey, I'm running into the same problem. can you disable local storage and always update the mode light/dark when the os setting changes?
10 replies
CDCloudflare Developers
Created by pearbender on 8/28/2024 in #general-help
404 not served when route doesn't match uploaded asset with Cloudfare pages
OK, thanks!
6 replies
CDCloudflare Developers
Created by pearbender on 8/28/2024 in #general-help
404 not served when route doesn't match uploaded asset with Cloudfare pages
Hey, I just did that and it works, but is it possible to instead just serve cloudfare's 404 page
6 replies
CDCloudflare Developers
Created by pearbender on 8/26/2024 in #general-help
Redirect from root to www not working
OK, I think I figured it out. I needed https://example.com/* and `https://www.example.com/${1} in my rules
8 replies
CDCloudflare Developers
Created by pearbender on 8/26/2024 in #general-help
Redirect from root to www not working
It seems like my redirect rule is not working
8 replies
CDCloudflare Developers
Created by pearbender on 8/26/2024 in #general-help
Redirect from root to www not working
No description
8 replies