Wazbat Posts - Answer Overflow

Wazbat

Explore posts from servers

DIAdiscord.js - Imagine an app NNuxt DDeno

•Created by Wazbat on 8/6/2024 in #❓・help

Unable to use auto imported functions inside vue html

Sorry if this is a silly question, but I'm really struggling to use some VueUse functions inside the actual html If I call useDateFormat inside the <script> part of my components it works perfectly fine, however if I use it inside a v-text or a v-model I get the following error:

Property 'useDateFormat' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<__VLS_TypePropsToOption<{ formdata: MyFormType; }>>>

Property 'useDateFormat' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<__VLS_TypePropsToOption<{ formdata: MyFormType; }>>>

I'm honestly at a loss. This used to work fine before and the docs don't mention this behaviour

6 replies

NNuxt

•Created by Wazbat on 5/20/2024 in #❓・help

Using a vercel env var in runtime config

Hi there! I'm trying to use env vars like NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL in my app.vue, and have defined them in my nuxt.config.ts as follows:

export default defineNuxtConfig({
  modules: [],
  runtimeConfig: {
    env: {
      vercel: {
        url: process.env.NUXT_ENV_VERCEL_URL,
        env: process.env.NUXT_ENV_VERCEL_ENV,
        projectProductionUrl: process.env.NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL,
      }
    },
    public: {
    }
  }
})

export default defineNuxtConfig({
  modules: [],
  runtimeConfig: {
    env: {
      vercel: {
        url: process.env.NUXT_ENV_VERCEL_URL,
        env: process.env.NUXT_ENV_VERCEL_ENV,
        projectProductionUrl: process.env.NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL,
      }
    },
    public: {
    }
  }
})

I'm then trying to reference these variables in my app.vue, as I wish to read the value of projectProductionUrl in my useSeoMeta I'm able to console.log the values in app.vue, and they appear fine. The following code:

const config = useRuntimeConfig()
console.log('config', config.env)

const config = useRuntimeConfig()
console.log('config', config.env)

Prints this to the backend (non-browser) console

config { vercel: { url: '', env: '', projectProductionUrl: '' } }

config { vercel: { url: '', env: '', projectProductionUrl: '' } }

However I also see in my browser it being logged as well. I can see the public and app, but config.env is undefined (as it is not public) Now, I understand that in order to prevent these 500 errors, I need to put these env vars under public, however as the docs say the following, I'm not sure what to do...

Setting the default of runtimeConfig values to differently named environment variables (for example setting myVar to process.env.OTHER_VARIABLE) will only work during build-time and will break on runtime. It is advised to use environment variables that match the structure of your runtimeConfig object.

https://nuxt.com/docs/guide/going-further/runtime-config I'm unable to change these env vars as they are built into vercel... How can I solve this?

1 replies

NNuxt

•Created by Wazbat on 5/17/2024 in #❓・help

What is the name of this component?

Hi there! A very basic question, but what is the name of this header banner component? I can't find it in the nuxt ui or nuxt ui pro docs

3 replies

NNuxt

•Created by Wazbat on 5/2/2024 in #❓・help

Nuxt not detecting patch route

3 replies

NNuxt

•Created by Wazbat on 4/28/2024 in #❓・help

Post request to page path

Hi there I'm trying to integrate my nuxt app with an external service, however that service sends a POST request to my sign up page with a JWT token If I add a route that is identical to a page route with an index.post.ts filename, is it possible for that to coexist with the regular nuxt page? Or would I have to create some kind of "interim" route that if get forwards them to a frontend route? Thanks!

8 replies

NNuxt

•Created by Wazbat on 4/23/2024 in #❓・help

null values in nuxt ui input

Hi there! It looks like after a recent change of something, nuxt ui no longer allows certain values in a UInput's v-model? I get the following error when trying to display a possible null value in an input

Type 'string | null | undefined' is not assignable to type 'string | number | undefined'

Type 'string | null | undefined' is not assignable to type 'string | number | undefined'

It also appears that boolean options are no longer allowed in select menus either... Or an array of strings? Though that might be due to the null value

Type 'string[] | null | undefined' is not assignable to type 'string | 
number | Record<string, any> | unknown[] | undefined'.

Type 'string[] | null | undefined' is not assignable to type 'string | 
number | Record<string, any> | unknown[] | undefined'.

If this change was intentional there a correct way to handle these kinds of data errors? It might just be a bad implementation my end if I'm using boolean values in select's for example I am using @nuxt/ui: ^2.14.2. The error is also present on ^2.15.2 which is the latest version The code used to build fine so I'm not sure what changed I'm also really confused as I only get the errors when running nuxi typecheck, but not in my local vscode Maybe it was an update to vue-tsc?

20 replies

NNuxt

•Created by Wazbat on 4/22/2024 in #❓・help

Nuxt ui types

Are the nuxt ui package types exported anywhere from the downloaded packages? I was able to find them in the github repo but No matter what I try I'm unable to import them from the built packages https://github.com/nuxt/ui/blob/dev/src/runtime/types/dropdown.d.ts Is there any way to get these types in my app without having to copy paste them from here?

6 replies

NNuxt

•Created by Wazbat on 4/20/2024 in #❓・help

Displaying an svg in an avatar using nuxt ui

Heyo! I'm trying to display an svg with a nuxt-ui component, however I'm unsure how to exactly use this The library I'm using, dicebear, give me an svg html, functions to generate a png or jpeg, a data uri, etc I've tried just piping the svg html into the avatar src but that doesn't work as it expects a url

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5" fill="none" shape-rendering="crispEdges"><metadata xmlns:rd....

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5" fill="none" shape-rendering="crispEdges"><metadata xmlns:rd....

How should I best display this? https://ui.nuxt.com/components/avatar#props

5 replies

Gaming

Programming