Biscuit
Biscuit
PostsComments
NNuxt
Created by Biscuit on 5/11/2024 in #❓・help
Using modelValue inside a nested div instead of the wrapping element.
I have an input and I am applying its modelValue inside of it. The problem is that modelValue come has a prop and I can't update its value. So I created a ref out of the modelValue and I am using as such. I just want to make sure I am doing the things properly, I wonder if there is a better approach to it. It's working btw 
<template>
  <div class="flex flex-col" :class="extraClasses">
    <div v-if="label" class="flex mb-2 text-blue">
      <p v-if="required" class="mr-1 text-xs text-error-600">*</p>
      <p
        class="text-sm font-semibold"
        :class="[disabled ? 'text-gray-300' : 'text-gray-800']"
      >
        {{ label }}
      </p>
    </div>
    <input
      v-if="variant"
      v-model="modelValue"
      :name="name"
      class="overflow-hidden overflow-ellipsis px-3 py-2 font-normal text-base rounded-lg placeholder:text-gray-300 placeholder:text-base"
      :class="[
        outline ? 'outline outline-2' : '',
        errorMessage
          ? 'outline-error-600 color-error-600'
          : 'outline-gray-400 focus:outline-gray-700',
      ]"
      :type="type"
      :placeholder="placeholder ?? name"
      :disabled="disabled"
      :required="required"
      v-bind="$attrs"
    />
    <textarea
      v-else
      v-model="modelValue"
      :name="name"
      class="overflow-hidden overflow-ellipsis px-3 py-2 font-normal text-base rounded-lg placeholder:text-gray-300 placeholder:text-base"
      :class="[
        outline ? 'outline outline-2' : '',
        errorMessage
          ? 'outline-error-600 color-error-600'
          : 'outline-gray-400 focus:outline-gray-700',
      ]"
      cols="30"
      rows="10"
      :placeholder="placeholder ?? name"
      :disabled="disabled"
      :required="required"
      v-bind="$attrs"
    />

    <span v-if="!noErrors" class="mt-1 text-error-500 h-3 text-[10px]">{{
      errorMessage
    }}</span>
  </div>
</template>
<template>
  <div class="flex flex-col" :class="extraClasses">
    <div v-if="label" class="flex mb-2 text-blue">
      <p v-if="required" class="mr-1 text-xs text-error-600">*</p>
      <p
        class="text-sm font-semibold"
        :class="[disabled ? 'text-gray-300' : 'text-gray-800']"
      >
        {{ label }}
      </p>
    </div>
    <input
      v-if="variant"
      v-model="modelValue"
      :name="name"
      class="overflow-hidden overflow-ellipsis px-3 py-2 font-normal text-base rounded-lg placeholder:text-gray-300 placeholder:text-base"
      :class="[
        outline ? 'outline outline-2' : '',
        errorMessage
          ? 'outline-error-600 color-error-600'
          : 'outline-gray-400 focus:outline-gray-700',
      ]"
      :type="type"
      :placeholder="placeholder ?? name"
      :disabled="disabled"
      :required="required"
      v-bind="$attrs"
    />
    <textarea
      v-else
      v-model="modelValue"
      :name="name"
      class="overflow-hidden overflow-ellipsis px-3 py-2 font-normal text-base rounded-lg placeholder:text-gray-300 placeholder:text-base"
      :class="[
        outline ? 'outline outline-2' : '',
        errorMessage
          ? 'outline-error-600 color-error-600'
          : 'outline-gray-400 focus:outline-gray-700',
      ]"
      cols="30"
      rows="10"
      :placeholder="placeholder ?? name"
      :disabled="disabled"
      :required="required"
      v-bind="$attrs"
    />

    <span v-if="!noErrors" class="mt-1 text-error-500 h-3 text-[10px]">{{
      errorMessage
    }}</span>
  </div>
</template>
9 replies
NNuxt
Created by Biscuit on 5/1/2024 in #❓・help
A composable that requires access to the Nuxt instance was called outside of a plugin,
I have two middlewares. control-access is going to redirect the user to home if there's a valid jwt token. auth is going to redirect the user to /login if the token is not valid and I can't retrieve a new one. I am storing the accessToken using a cookie useCookie('token'). This is handled by a composable called useAccessToken. So basically the pages call the middlewares that call this composable. I am getting the following error 
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

at Module.useRequestEvent (\nuxt\dist\app\composables\ssr.js:7:58)
at readRawCookies (\node_modules\nuxt\dist\app\composables\cookie.js:123:101)
at Module.useCookie (node_modules\nuxt\dist\app\composables\cookie.js:28:19)
at refreshAccessToken (\composables\useAccessToken.ts:32:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async verifyAccessToken (\composables\useAccessToken.ts:47:7)
at async \middleware\controlAccess.ts:14:86
at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
at async node_modules\nuxt\dist\pages\runtime\plugins\router.js:161:26
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at `https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables`.

at Module.useRequestEvent (\nuxt\dist\app\composables\ssr.js:7:58)
at readRawCookies (\node_modules\nuxt\dist\app\composables\cookie.js:123:101)
at Module.useCookie (node_modules\nuxt\dist\app\composables\cookie.js:28:19)
at refreshAccessToken (\composables\useAccessToken.ts:32:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async verifyAccessToken (\composables\useAccessToken.ts:47:7)
at async \middleware\controlAccess.ts:14:86
at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
at async node_modules\nuxt\dist\pages\runtime\plugins\router.js:161:26
here my files 
export default defineNuxtRouteMiddleware(async (to, _from) => {
  const config = useRuntimeConfig();
  const { verifyAccessToken } = useAccessToken(config.public.appServer);

  await verifyAccessToken();
  const currentToken = useCookie("token");
  if (currentToken.value) {
    return navigateTo("/");
  }
});
export default defineNuxtRouteMiddleware(async (to, _from) => {
  const config = useRuntimeConfig();
  const { verifyAccessToken } = useAccessToken(config.public.appServer);

  await verifyAccessToken();
  const currentToken = useCookie("token");
  if (currentToken.value) {
    return navigateTo("/");
  }
});
3 replies
NNuxt
Created by Biscuit on 4/30/2024 in #❓・help
Nuxt nuxt/auth basic auth
I did this like I were coding for a react app, I feel like I am doing extra work. I tried using nuxt/auth but it seems to only work with providers and not simple servers requests. Every tutorial online is using a provider for authentication. I have a server that works with basic auth, and I am just not able to make my nuxt app consume the api. note: As for now, I am not using this nuxt/auth. I am using refresh/access tokens, whenever the page is refreshed the http-only cookie (containing the refresh token) should be sent in the request made to /refresh-token, but the jid token is not being added to the request. 
      const response = await fetch(`${config.public.appServer}/refresh-token`, {
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });
      const response = await fetch(`${config.public.appServer}/refresh-token`, {
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });
I am using cookies to keep the current accessToken, I'd like to have it in memory instead but it seems that using cookies to store it is the way to go. I am quite lost, just take a look at the login page, middlewares and authStore. If you people have a project that's making a request to a custom auth-server let me know https://github.com/doubleyooz/nuxt-gighub
1 replies