Phillip
Phillip
NNuxt
Created by Phillip on 6/16/2024 in #❓・help
Private server routes
Hello guys, how can i flag my nuxt 3 api routes as private meaning they can only be accessed from the server itself and is not viewable by the user? Since every API file I put inside /server/api, but also /server/, will be accessible by other users. How can I prevent this?
6 replies
NNuxt
Created by Phillip on 3/27/2024 in #❓・help
Is there a way to prefetch the next page which has content that is being injected by javascript?
I have a page /welcome/payment-method where I load a Stripe UI payment element. Stripe has a function paymentElement.mount('#payment-element'), so basically, it looks for a DOM element with the id #payment-element. However, injecting the Stripe script and mounting the element takes time. I would like to show the form immediately. Is there way I can load the stripe script + mount the div#payment-element before the user visits the page /welcome/payment-method? Can I prepare this while the user is on page /welcome/intro or something? I hope my question is clear. I'm happy to explain further. Thank you!
2 replies
NNuxt
Created by Phillip on 3/27/2024 in #❓・help
How to access the event in a server/utils function?
I've created a server utility function in /server/utils/get-facebook-account.ts which looks like this
import { serverSupabaseClient } from '#supabase/server'

export const getFacebookAccount = async () => {
// const event = // how to get event
const supabase = await serverSupabaseClient<Database>(event)

const account = supabase.from()... // do stuff to get account;

return account;
}
import { serverSupabaseClient } from '#supabase/server'

export const getFacebookAccount = async () => {
// const event = // how to get event
const supabase = await serverSupabaseClient<Database>(event)

const account = supabase.from()... // do stuff to get account;

return account;
}
I'm using Supabase so for the serverSupabaseClient I need the event. Now I'm wondering, do I always need to pass the event to my utility function like this? /server/api/campaign.post.ts
export default defineEventHandler(async (event) => {
await getFacebookAccount(event)
})
export default defineEventHandler(async (event) => {
await getFacebookAccount(event)
})
Because I've read there is a useRequestEvent composable but it's only available in the Nuxt context. Is there something similar for /server functions? Thanks!
3 replies
NNuxt
Created by Phillip on 3/2/2024 in #❓・help
await useAsyncData in setup doesn't block navigation
I want to wait until navigating to the next page until the store data has been fetched and set. I'm using Nuxt 3 + Supabase + Pinia My approach in provider.vue (where user gets redirected after signing in/up to set cookies etc.)
// redirect once user has been set
const user = useSupabaseUser()
watch(user, async () => {
if (user.value) {
await useSteps().handleNavigateToNextStep()
}
}, { immediate: true })
// redirect once user has been set
const user = useSupabaseUser()
watch(user, async () => {
if (user.value) {
await useSteps().handleNavigateToNextStep()
}
}, { immediate: true })
app.vue: fetch store data. I'm hoping to block navigation by using await useAsyncData
const user = useSupabaseUser()
await useAsyncData('userStoreData', async () => {
if (user.value) {
await useUserStore().fetchInitialData()
}
}, { watch: [user] })
const user = useSupabaseUser()
await useAsyncData('userStoreData', async () => {
if (user.value) {
await useUserStore().fetchInitialData()
}
}, { watch: [user] })
my store (reduced data for demonstration purpose)
export const useUserStore = defineStore({
id: 'UserStore',
state: () => ({
company: null as Tables<'company'> | null,
}),
actions: {
async fetchInitialData() {
const [companyData] = await Promise.all([
useCompany().getCompany(),
])
this.company = companyData;
},
}
})
export const useUserStore = defineStore({
id: 'UserStore',
state: () => ({
company: null as Tables<'company'> | null,
}),
actions: {
async fetchInitialData() {
const [companyData] = await Promise.all([
useCompany().getCompany(),
])
this.company = companyData;
},
}
})
... however, after the provider.vue redirects me, this value is undefined in one of my composables: const { company } = storeToRefs(useUserStore()) How can I make the application wait until the store has been set?
1 replies
NNuxt
Created by Phillip on 6/11/2023 in #❓・help
How can I use tailwind @apply within a style tag?
Like this:
<style lang="scss" scoped>
a.nuxt-link-active {
@apply .bg-indigo-700 .text-white;
}
</style>
<style lang="scss" scoped>
a.nuxt-link-active {
@apply .bg-indigo-700 .text-white;
}
</style>
I'm using @Nuxtjs/tailwindcss with Nuxt 3
3 replies
NNuxt
Created by Phillip on 2/28/2023 in #❓・help
How to enforce redirecting to HTTPS?
No description
4 replies