Phillip Comments - Answer Overflow

@kapa.ai Deleted node modules, cleared pnpm cache and reinstalled packages, upgraded to newest Nuxt version which got rid of some issues. But this error remains: [nitro 10:16:13 AM] ERROR RollupError: [plugin impound] Vue app aliases are not allowed in server runtime. [importing #build/app.config.mjs from nodemodules/.pnpm/[email protected]@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/nuxt/dist/app/config.js]

11 replies

NNuxt

•Created by Phillip on 12/7/2024 in #❓・help

How can I implement an inline script on page?

Already tried this. Not working.

7 replies

NNuxt

•Created by Phillip on 11/4/2024 in #❓・help

`getCachedData`: data is always undefined

I used this workaround mentioned here https://github.com/nuxt/nuxt/issues/24332#issuecomment-2238821604 and this is now working.

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const cachedData = nuxtApp.payload.data['userStoreData'] || nuxtApp.static.data['userStoreData'] as UserDataWithFetchedAt


        if (cachedData) {
            const expirationDate = new Date(cachedData.fetchedAt)
            expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
            const isExpired = expirationDate.getTime() < Date.now()

            if (!isExpired) return cachedData
        }

        const userData = await userStore.fetchInitialData()
        return userData
    }
},
{
    watch: [user],
    transform(data) {
        return { ...data, fetchedAt: Date.now() }
    },
    // getCachedData(key) {
    //     console.log('key', key)
    //     console.log('nuxtApp.payload', nuxtApp.payload.data['userStoreData'])
    //     const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    //     console.log('data', data)

    //     // refetch
    //     if (!data) return

    //     const expirationDate = new Date(data.fetchedAt)
    //     expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
    //     const isExpired = expirationDate.getTime() < Date.now()

    //     // refetch
    //     if (isExpired) return

    //     return data
    // }
})

const { data: userDataAsync } = await useAsyncData('userStoreData', async () => {
    if (user.value && !isAdmin) {
        const cachedData = nuxtApp.payload.data['userStoreData'] || nuxtApp.static.data['userStoreData'] as UserDataWithFetchedAt


        if (cachedData) {
            const expirationDate = new Date(cachedData.fetchedAt)
            expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
            const isExpired = expirationDate.getTime() < Date.now()

            if (!isExpired) return cachedData
        }

        const userData = await userStore.fetchInitialData()
        return userData
    }
},
{
    watch: [user],
    transform(data) {
        return { ...data, fetchedAt: Date.now() }
    },
    // getCachedData(key) {
    //     console.log('key', key)
    //     console.log('nuxtApp.payload', nuxtApp.payload.data['userStoreData'])
    //     const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    //     console.log('data', data)

    //     // refetch
    //     if (!data) return

    //     const expirationDate = new Date(data.fetchedAt)
    //     expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000);
    //     const isExpired = expirationDate.getTime() < Date.now()

    //     // refetch
    //     if (isExpired) return

    //     return data
    // }
})

7 replies

NNuxt

•Created by Phillip on 11/4/2024 in #❓・help

`getCachedData`: data is always undefined

I noticed that when changing tabs it doesn't even get in the getCachedData function and immediately refetches

7 replies

NNuxt

•Created by Phillip on 7/20/2024 in #❓・help

"Cannot find module or its corresponding type declarations.ts(2307)"

Solved it. I accidentally had this line in my tsconfig

"compilerOptions": {
    "baseUrl": ".",
...

"compilerOptions": {
    "baseUrl": ".",
...

2 replies

NNuxt

•Created by Phillip on 7/11/2024 in #❓・help

How to use DefinitelyTyped types in a Nuxt 3 project?

Hey @manniL / TheAlexLichter, thanks for your time–I figured it out! Had to reference it:

<script setup lang="ts">
/// <reference types="google.maps" />

<script setup lang="ts">
/// <reference types="google.maps" />

Now I can do this:

const googleAutocompleteCity = (place: google.maps.places.PlaceResult) => {
    // yeyyy intellisense, I finally know what's going on :)
    const formattedAddress = place.formatted_address
}

const googleAutocompleteCity = (place: google.maps.places.PlaceResult) => {
    // yeyyy intellisense, I finally know what's going on :)
    const formattedAddress = place.formatted_address
}

3 replies

NNuxt

•Created by Phillip on 6/28/2024 in #❓・help

appMiddleware in routeRules not working?

I was looking 2 hours for a solution––thank you 😄

7 replies

NNuxt

•Created by Phillip on 6/28/2024 in #❓・help

appMiddleware in routeRules not working?

Alright–but it does the job in my case. Thank you!

7 replies

NNuxt

•Created by Phillip on 6/28/2024 in #❓・help

appMiddleware in routeRules not working?

Thank you so much! I moved it into server/middleware and now it's being executed 🙂 And then if the user is for example not authorized I'd do something like this?

if (userNotAuthenticated) {
    throw createError({ status: 401 })
}

if (userNotAuthenticated) {
    throw createError({ status: 401 })
}

7 replies

NNuxt

•Created by Phillip on 6/16/2024 in #❓・help

Private server routes

got it! You mean the server/utils directory, right? I will just go with that. Thank you

6 replies

NNuxt

•Created by jwishnie on 3/30/2024 in #❓・help

Directory for utils for both Server and Client?

You have to import and re-export it. Like this /utils/buildTargetAudience.ts (client util)

import { buildTargetAudience } from '@/server/utils/buildTargetAudience'
export default buildTargetAudience

import { buildTargetAudience } from '@/server/utils/buildTargetAudience'
export default buildTargetAudience

2 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?

@L422Y thanks for your ideas! I'm having troubles to follow you quite frankly. I barely have used mutation observers but you mean I should listen to DOM changes? Or what should I observe?
Your solution would still mean that paymentElement.mount('#payment-element') needs to be run on /welcome/payment-method, correct? => meaning it'll still take a while before the form shows up for the user.

2 replies

NNuxt

•Created by Phillip on 3/27/2024 in #❓・help

How to access the event in a server/utils function?

@kingtimm this worked perfectly, thank you!

3 replies

NNuxt

•Created by Phillip on 6/11/2023 in #❓・help

How can I use tailwind @apply within a style tag?

@unai you are right! thank you

3 replies

NNuxt

•Created by Phillip on 2/28/2023 in #❓・help

How to enforce redirecting to HTTPS?

@Fabian B. thank you so much!

4 replies

Gaming

Programming