Cake Comments - Answer Overflow

Cake

Explore posts from servers

KPCKevin Powell - Community NNuxt

Posts Comments

NNuxt

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

Template ref "refName" used on a non-ref value. It will not work in the production build.

will cause that error

10 replies

NNuxt

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

Template ref "refName" used on a non-ref value. It will not work in the production build.

const shippingForm = ref({...})
const formRef = useTemplateRef('shippingForm')

<form ref="shippingForm" />

const shippingForm = ref({...})
const formRef = useTemplateRef('shippingForm')

<form ref="shippingForm" />

10 replies

NNuxt

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

Template ref "refName" used on a non-ref value. It will not work in the production build.

looks like u have another variable called shippingForm

10 replies

NNuxt

•Created by eyJOdnJHb25uYSI6Imd2VXVwIn0= on 10/26/2024 in #❓・help

How to get TailwindCSS IntelliSense working in NuxtUI v3?

- make sure you have a config file in your root - try upgrading/downgrading the tailwind vscode extension

13 replies

NNuxt

•Created by Dobby on 10/26/2024 in #❓・help

@nuxtjs/i18n - Vue: __VLS_ctx.$t is of type unknown

@Morpheus

11 replies

NNuxt

•Created by Dobby on 10/26/2024 in #❓・help

@nuxtjs/i18n - Vue: __VLS_ctx.$t is of type unknown

@Dobby

11 replies

NNuxt

•Created by Dobby on 10/26/2024 in #❓・help

@nuxtjs/i18n - Vue: __VLS_ctx.$t is of type unknown

if you have other modules installed try commenting them out one by one, I've had similar issues in the past (not with vue-i18n) that was caused by some unrelated module messing up with types.

11 replies

NNuxt

•Created by Pawieplays on 10/1/2024 in #❓・help

useAsyncData dual call issue. One in the client side and server side?

consider showing code?

4 replies

NNuxt

•Created by hz2222 on 9/30/2024 in #❓・help

detect if a user is active

you could probably use something like https://vueuse.org/core/useIdle/#useidle

4 replies

NNuxt

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

Is it safe to use useFetch() inside a function?

why do you want to useFetch inside the function? in ur code is it a custom useFetch wrapper? or because you perhaps want the loading state to be handled automatically?

6 replies

NNuxt

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

onResponseError not running

// app/pages/admin/fabric-color.vue
const { data } = await useAdminApi<PaginatedResponse<OptionValue>>(
  `/api/options/2/values`,
  {
    params: {
      page,
      count,
      search
    }
  }
)

// app/pages/admin/fabric-color.vue
const { data } = await useAdminApi<PaginatedResponse<OptionValue>>(
  `/api/options/2/values`,
  {
    params: {
      page,
      count,
      search
    }
  }
)

6 replies

NNuxt

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

onResponseError not running

full code:

// app/plugins/02.adminApi.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const $adminApi = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    credentials: "include",
    onResponseError(ctx) {
      console.log("onResponseError", ctx)
    },
    onResponse(ctx) {
      console.log("onResponse", ctx)
    }
  })

  return {
    provide: {
      adminApi: $adminApi
    }
  }
})

// app/plugins/02.adminApi.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const $adminApi = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    credentials: "include",
    onResponseError(ctx) {
      console.log("onResponseError", ctx)
    },
    onResponse(ctx) {
      console.log("onResponse", ctx)
    }
  })

  return {
    provide: {
      adminApi: $adminApi
    }
  }
})

// app/composables/useAdminApi.ts

import type { UseFetchOptions } from "#app"

export const useAdminApi = <T>(
  url: MaybeRefOrGetter<string>,
  options: UseFetchOptions<T> = {}
) => {
  const { $adminApi } = useNuxtApp()
  return useFetch(url, {
    ...options,
    $fetch: $adminApi
  })
}

// app/composables/useAdminApi.ts

import type { UseFetchOptions } from "#app"

export const useAdminApi = <T>(
  url: MaybeRefOrGetter<string>,
  options: UseFetchOptions<T> = {}
) => {
  const { $adminApi } = useNuxtApp()
  return useFetch(url, {
    ...options,
    $fetch: $adminApi
  })
}