kb Posts - Answer Overflow

Explore posts from servers

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

useAsyncData/useFetch > Function > Pinia Action - Best practices?

Hey folks, looking for some advice. I currently have something like this

const { error } = useAsyncData('details', async () => {
  if (isSelected.value) return details.value

  await fetchdetails()

  return details.value
})

const { error } = useAsyncData('details', async () => {
  if (isSelected.value) return details.value

  await fetchdetails()

  return details.value
})

so I already think im using it weird, but then that fetchDetails is in the component, and it has some logic on building a payload, which ultimately then fires off a pinia action, and then our pinia action, uses useFetchApi (which is a composable of $fetch) - so were now at like 4 levels of execution lol, it just feels a bit icky. Im just wondering what the best practices here might be, like the useAsyncData at the top, would that be advised/not advised given the scenario ive explained?

7 replies

NNuxt

•Created by kb on 11/8/2024 in #❓・help

Nuxt OG Image works locally but not deployed

Hey, I can see my og image locally in the dev tools, but it is not doing it when deploying. Is it because it doesnt put the image in public folder but instead https://x.vercel.app/__og-image__/image/stores/x-test-store-3733/og.png I am currently trying a local build & serve

10 replies

NNuxt

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

NuxtImg + Vercel

Im using NuxtImg on Vercel, but I cannot figure out what I need to put in the nuxt.config.js because the docs say im supposed to supply every custom width? (https://image.nuxt.com/providers/vercel) I am running vuetify, and tailwind, if this helps. But as far as sizes, in the given component, im rendering out a few images, with unique sizes per, where im passing this; into my NuxtImg, sizes (in a loop)

 [
  {
    "src": "/home-bg/home-bg-top-1.webp",
    "class": "home-bg-top-1",
    "sizes": "xs:56px sm:104px md:88px lg:120px xl:136px",
    "key": "home-bg-top-1"
  },
  {
    "src": "/home-bg/home-bg-top-2.webp",
    "class": "home-bg-top-2",
    "sizes": "xs:66px sm:114px md:98px lg:130px xl:146px",
    "key": "home-bg-top-2"
  },
  {
    "src": "/home-bg/home-bg-top-3.webp",
    "class": "home-bg-top-3",
    "sizes": "xs:130px sm:146px md:146px lg:226px xl:226px",
    "key": "home-bg-top-3"
  },
  {
    "src": "/home-bg/home-bg-top-4.webp",
    "class": "home-bg-top-4",
    "sizes": "xs:62px sm:78px md:94px lg:110px xl:126px",
    "key": "home-bg-top-4"
  },
  {
    "src": "/home-bg/home-bg-bottom-1.webp",
    "class": "home-bg-bottom-1",
    "sizes": "xs:100px sm:164px md:148px lg:225px xl:180px",
    "key": "home-bg-bottom-1"
  },
  {
    "src": "/home-bg/home-bg-bottom-2.webp",
    "class": "home-bg-bottom-2",
    "sizes": "xs:70px sm:94px md:94px lg:110px xl:110px",
    "key": "home-bg-bottom-2"
  },
  {
    "src": "/home-bg/home-bg-bottom-3.webp",
    "class": "home-bg-bottom-3",
    "sizes": "xs:131px sm:179px md:163px lg:179px xl:227px",
    "key": "home-bg-bottom-3"
  }
]

 [
  {
    "src": "/home-bg/home-bg-top-1.webp",
    "class": "home-bg-top-1",
    "sizes": "xs:56px sm:104px md:88px lg:120px xl:136px",
    "key": "home-bg-top-1"
  },
  {
    "src": "/home-bg/home-bg-top-2.webp",
    "class": "home-bg-top-2",
    "sizes": "xs:66px sm:114px md:98px lg:130px xl:146px",
    "key": "home-bg-top-2"
  },
  {
    "src": "/home-bg/home-bg-top-3.webp",
    "class": "home-bg-top-3",
    "sizes": "xs:130px sm:146px md:146px lg:226px xl:226px",
    "key": "home-bg-top-3"
  },
  {
    "src": "/home-bg/home-bg-top-4.webp",
    "class": "home-bg-top-4",
    "sizes": "xs:62px sm:78px md:94px lg:110px xl:126px",
    "key": "home-bg-top-4"
  },
  {
    "src": "/home-bg/home-bg-bottom-1.webp",
    "class": "home-bg-bottom-1",
    "sizes": "xs:100px sm:164px md:148px lg:225px xl:180px",
    "key": "home-bg-bottom-1"
  },
  {
    "src": "/home-bg/home-bg-bottom-2.webp",
    "class": "home-bg-bottom-2",
    "sizes": "xs:70px sm:94px md:94px lg:110px xl:110px",
    "key": "home-bg-bottom-2"
  },
  {
    "src": "/home-bg/home-bg-bottom-3.webp",
    "class": "home-bg-bottom-3",
    "sizes": "xs:131px sm:179px md:163px lg:179px xl:227px",
    "key": "home-bg-bottom-3"
  }
]

So what exactly does my nuxt config want me to put, for it to work on vercel? thx!!

11 replies

NNuxt

•Created by kb on 11/5/2024 in #❓・help

Nuxt 3 SSR Vercel Deployment Issues

14 replies

NNuxt

•Created by kb on 10/28/2024 in #❓・help

Lint complaining about await in setup function

7 replies

NNuxt

•Created by kb on 10/9/2024 in #❓・help

N2 > 3 server middleware issue

Hey, Im trying to transplant some functionality from a nuxt2 project, where we had ~/server_middleware/authauth.js which has some imports in like

import { AVAILABLE_STRATEGIES, AVAILABLE_METHODS } from '../constants/auth'
import {
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_BAD_REQUEST,
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_UNKNOWN_REQUEST,
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_STRATEGY_AUTHENTICATION_ERROR,
} from '../constants/errors'
import { getStrategyCredentials, getStrategyEndpoint } from '../utils/authCredentials'

import { AVAILABLE_STRATEGIES, AVAILABLE_METHODS } from '../constants/auth'
import {
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_BAD_REQUEST,
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_UNKNOWN_REQUEST,
  ERROR_AUTHAUTH_SERVER_MIDDLEWARE_STRATEGY_AUTHENTICATION_ERROR,
} from '../constants/errors'
import { getStrategyCredentials, getStrategyEndpoint } from '../utils/authCredentials'

so now in nuxt3, I have made ~\server\api\authauth.post.js which i think is right? and those same imports with updated pathing like import { getStrategyCredentials, getStrategyEndpoint } from '../../utils/authCredentials' but I get

[15:14:52]  ERROR  [worker reload] [worker init] Cannot find module 'C:\Users\constants\auth' imported from C:\Users\myuser\Repos\myrepo\.nuxt\dev\index.mjs

any ideas?

3 replies

NNuxt

•Created by kb on 9/3/2024 in #❓・help

Nuxt Icon - Custom Local Collection - Change Colour?

As title - can you not change the colour of a SVG that is part of a custom local collection?

4 replies

NNuxt

•Created by kb on 7/23/2024 in #❓・help

Make Nuxt Icon <Icon> a global component?

Hi, we are using nuxt 3, and im using the NuxtIcon module https://nuxt.com/modules/icon - but right now we dont have our components auto importing, so i wondered how can I make it so I dont need to do import { Icon } from '#components' in every component?

4 replies

NNuxt

•Created by kb on 4/16/2024 in #❓・help

How to use plugins in latest nuxt/eslint module?

As title basically, how do I use all my plugins & prettier etc when migrating to the newest eslint integration method?

1 replies

NNuxt

•Created by kb on 4/9/2024 in #❓・help

404 after error

1 replies

NNuxt

•Created by kb on 3/21/2024 in #❓・help

Removing a cookie

Hey, is this definitely the best way to remove a cookie? I am trying to replace cookiz library with native useCookie

const registerStepValidatedCookie = useCookie('registerStepValidated')
registerStepValidatedCookie.value = null

const registerStepValidatedCookie = useCookie('registerStepValidated')
registerStepValidatedCookie.value = null

1 replies

NNuxt

•Created by kb on 3/8/2024 in #❓・help

failed to resolve component

have just followed this pretty much verbatim: https://levelup.gitconnected.com/using-fontawesome-icons-with-nuxt-3-e390bd15c0fb but im getting

[Vue warn]: Failed to resolve component: FontAwesomeIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[Vue warn]: Failed to resolve component: FontAwesomeIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

im using nuxt 3 and haven't imported this component explicitly

4 replies

Gaming

Programming