kb Posts - Answer Overflow

Explore posts from servers

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

Error pages

Am I doing this right? It used to be that we had error.vue in layouts but now were on nuxt 3, ive made error.vue in the top level, and then ive got

<template>
  <NuxtLayout />
  <p>{{ error.statusCode }} </p>
// etc

<template>
  <NuxtLayout />
  <p>{{ error.statusCode }} </p>
// etc

in that file, so it uses the default layout - but only the layout renders. If i remove the layout part, i see my error code and stuff

10 replies

NNuxt

•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

CDCloudflare Developers

•Created by kb on 11/21/2023 in #pages-help

Nuxt Project Wont Publish

Howdy, ive got a nuxt 2.17 project that works fine locally, running node 18.18.2 (which I have as a CF node env) - but I just cant get past this issue

01:09:54.512    ➤ YN0002: │ ss-quiz@workspace:. doesn't provide vue-template-compiler (p7ea12), requested by @vue/test-utils
01:09:54.512    ➤ YN0002: │ ss-quiz@workspace:. doesn't provide vuex (p4600f), requested by vuex-module-decorators
01:09:54.512    ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
01:09:54.514    ➤ YN0000: └ Completed in 10s 575ms
01:09:54.617    ➤ YN0000: ┌ Post-resolution validation
01:09:54.618    ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
01:09:54.619    ➤ YN0000: └ Completed
01:09:54.619    ➤ YN0000: Failed with errors in 10s 682ms
01:09:54.670    Error: Exit with error code: 1
01:09:54.670        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
01:09:54.670        at Object.onceWrapper (node:events:652:26)
01:09:54.671        at ChildProcess.emit (node:events:537:28)
01:09:54.671        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
01:09:54.679    Failed: build command exited with code: 1
01:09:55.700    Failed: error occurred while running build command

01:09:54.512    ➤ YN0002: │ ss-quiz@workspace:. doesn't provide vue-template-compiler (p7ea12), requested by @vue/test-utils
01:09:54.512    ➤ YN0002: │ ss-quiz@workspace:. doesn't provide vuex (p4600f), requested by vuex-module-decorators
01:09:54.512    ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
01:09:54.514    ➤ YN0000: └ Completed in 10s 575ms
01:09:54.617    ➤ YN0000: ┌ Post-resolution validation
01:09:54.618    ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
01:09:54.619    ➤ YN0000: └ Completed
01:09:54.619    ➤ YN0000: Failed with errors in 10s 682ms
01:09:54.670    Error: Exit with error code: 1
01:09:54.670        at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
01:09:54.670        at Object.onceWrapper (node:events:652:26)
01:09:54.671        at ChildProcess.emit (node:events:537:28)
01:09:54.671        at ChildProcess._handle.onexit (node:internal/child_process:291:12)
01:09:54.679    Failed: build command exited with code: 1
01:09:55.700    Failed: error occurred while running build command

I have a yarn.lock file there, and have tried all sorts of build commands, yarn build yarn generate I just can't understand whats wrong, even from that log.

2 replies

Gaming

Programming