Just Simeon Posts - Answer Overflow

Just Simeon

Explore posts from servers

NNuxt ZZITADEL

Posts Comments

NNuxt

•Created by Just Simeon on 4/20/2025 in #❓・help

Increase Width of Modal

How can I increase the width of a modal?

10 replies

NNuxt

•Created by Just Simeon on 4/9/2025 in #❓・help

Form with components containing FormInputs

I am using a UForm for a bigger form we have, it has multiple steps which are separated into their own components. Each component is conditionally rendered inside the UForm and they share a common schema and state (the same one that the form uses). my current Idea is to trigger the validation manually once the user presses the next step button but still keep the normal FormInput error display. However since the FormInputs are in their own components, the error is not properly set and therefore not displayed. Is there a way to fix this?

5 replies

NNuxt

•Created by Just Simeon on 3/30/2025 in #❓・help

IPX causing issues

Hello I have an image 428x200, its used as a logo on the site. for testing I have set the sizes="210px" however the images generated by ipx aren't returning the proper icon. instead it returns the "missing image" icon

7 replies

NNuxt

•Created by Just Simeon on 3/30/2025 in #❓・help

Nuxt Icon causing CSP errors

Heya, I have a pretty strict CSP but I am getting style-src errors caused by Nuxt Icon:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-GJ94fPFA2BCkEPaySFjRiT7z'". Either the 'unsafe-inline' keyword, a hash ('sha256-dPYPS1TMcPZggmgjSOaAH5OtT/S4bQBvI0YO4LbXBp8='), or a nonce ('nonce-...') is required to enable inline execution.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-GJ94fPFA2BCkEPaySFjRiT7z'". Either the 'unsafe-inline' keyword, a hash ('sha256-dPYPS1TMcPZggmgjSOaAH5OtT/S4bQBvI0YO4LbXBp8='), or a nonce ('nonce-...') is required to enable inline execution.

Looking at the causing code its caused by a component called "NuxtIconCss" which has a function to append something to the document head

5 replies

NNuxt

•Created by Just Simeon on 3/30/2025 in #❓・help

Cache Policy

Heya, I am trying to set a proper cache policy for images in /public (and images generated by the nuxtimg sizes tag) and stuff in _nuxt, how would I do that?

5 replies

NNuxt

•Created by Just Simeon on 3/28/2025 in #❓・help

what is the requireJs alternative?

I have a dependency called videojs that needs global/window. however that doesn't exist and I found an issue (https://github.com/videojs/video.js/issues/5680#issuecomment-570120497) that shows a fix but it requires requirejs.

8 replies

NNuxt

•Created by Just Simeon on 3/28/2025 in #❓・help

kbd multiple keys

Hey, does Ukbd in ui3 not support things like ctrl_k like defineShortcuts has?

4 replies

NNuxt

•Created by Just Simeon on 12/11/2024 in #❓・help

Add Text input to ui3 contextmenu

Is it possible to add a Text Input into the ui3 contextmenu?

4 replies

NNuxt

•Created by Just Simeon on 12/6/2024 in #❓・help

$fetch not working with the new shared folder properly

I have a composable in my shared folder that uses $fetch to query nitro endpoints. However for some reason it says "/api/v1/data/agents": <no response> Failed to parse URL from /api/v1/data/agents

14 replies

NNuxt

•Created by Just Simeon on 12/4/2024 in #❓・help

Nuxt UI3 UButton block

In nuxt ui 2 there is the block property in the UButton, however in nuxt ui 3 there is no block, what is the equiv in nuxt ui 3?

21 replies

NNuxt

•Created by Just Simeon on 12/2/2024 in #❓・help

Center Notifications on the screen

Hey, I want to make my notification toast appear at the bottom center of the screen. How would I do that?

4 replies

NNuxt

•Created by Just Simeon on 12/2/2024 in #❓・help

Loading Icon Timed out

Hello, I have this component:

<template>
  <div>
    <h1 class="text-xl font-bold text-gray-800">{{ props.data.title }}</h1>
    <ul>
      <li v-for="(topic,index) in props.data.topics" :key="topic.header">
        <div id="generate-wrapper" class="flex gap-2">
          <h2 class="text-lg font-bold text-gray-800">{{ topic.header }}</h2>
          <UButton v-if="!generated.includes(topic.header)" icon="i-heroicons-play" color="primary" label="Generate"
                   @click="generateSection(topic)" size="sm"  :disabled="current != index"/>
          <UIcon v-else name="i-heroicons-check-circle" color="success" size="sm"/>
        </div>

        <ul class="list-disc flex flex-col px-2">
          <li v-for="subtopic in topic.subtopics" :key="subtopic">
            <p class="text-gray-600">{{ subtopic }}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<template>
  <div>
    <h1 class="text-xl font-bold text-gray-800">{{ props.data.title }}</h1>
    <ul>
      <li v-for="(topic,index) in props.data.topics" :key="topic.header">
        <div id="generate-wrapper" class="flex gap-2">
          <h2 class="text-lg font-bold text-gray-800">{{ topic.header }}</h2>
          <UButton v-if="!generated.includes(topic.header)" icon="i-heroicons-play" color="primary" label="Generate"
                   @click="generateSection(topic)" size="sm"  :disabled="current != index"/>
          <UIcon v-else name="i-heroicons-check-circle" color="success" size="sm"/>
        </div>

        <ul class="list-disc flex flex-col px-2">
          <li v-for="subtopic in topic.subtopics" :key="subtopic">
            <p class="text-gray-600">{{ subtopic }}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

that dynamically adds topics and buttons to my page. it works fine, however when opening the page I get this: [Icon] loading icon heroicons:play timed out after 500ms and the buttons don't have an icon. What can I do to fix it?

10 replies

NNuxt

•Created by Just Simeon on 11/28/2024 in #❓・help

Disable hover for button

Is there a simple way to disable the hover events for a button?

19 replies

NNuxt

•Created by Just Simeon on 11/19/2024 in #❓・help

Weird Error without stacktrace

Hello, I am trying to upload a file using google's storage library. However whenever I call the method I get this error: ERROR [nuxt] [request error] [unhandled] [500] Cannot read private member from an object whose class did not declare it I am following google's docs to properly upload the file and can't spot something off. Here is my code:

import { ref } from 'vue';
import { Storage } from '@google-cloud/storage';

const storageInstance = ref<Storage | null>(null);

export function useGoogleStorage() {
    if (!import.meta.server) {
        throw new Error('useGoogleStorage can only be used on the server side.');
    }

    if (!storageInstance.value) {
        storageInstance.value = new Storage();
    }
    
    const uploadFile = async (bucketName: string, filePath: string, destination: string, contentType: string) => {
        if (!storageInstance.value) return;
        const bucket = storageInstance.value.bucket(bucketName);
        console.log('Uploading file to Google Cloud Storage:', destination);
        console.log('File path:', filePath);
        console.log('Content type:', contentType);
        await bucket.upload(filePath, {
            destination,
            metadata: {
                contentType
            }
        });
        
    };
}

import { ref } from 'vue';
import { Storage } from '@google-cloud/storage';

const storageInstance = ref<Storage | null>(null);

export function useGoogleStorage() {
    if (!import.meta.server) {
        throw new Error('useGoogleStorage can only be used on the server side.');
    }

    if (!storageInstance.value) {
        storageInstance.value = new Storage();
    }
    
    const uploadFile = async (bucketName: string, filePath: string, destination: string, contentType: string) => {
        if (!storageInstance.value) return;
        const bucket = storageInstance.value.bucket(bucketName);
        console.log('Uploading file to Google Cloud Storage:', destination);
        console.log('File path:', filePath);
        console.log('Content type:', contentType);
        await bucket.upload(filePath, {
            destination,
            metadata: {
                contentType
            }
        });
        
    };
}

the 3 console.logs are being execute properly and their output is also correct.

5 replies

NNuxt

•Created by Just Simeon on 11/15/2024 in #❓・help

HELP NEEDED - Google Storage Bucket Integration

Is there a way to integrate Google's storage buckets as a file storage in nuxt 3?

5 replies

NNuxt

•Created by Just Simeon on 11/15/2024 in #❓・help

I am not able to submit my form for some reason

As the title says, I can't submit my form. No error is shown in the console but nothing happens. here is my form:

    <UForm :schema="objectiveFormSchema" :state="formData" @submit="onSubmit" class="w-full flex flex-col gap-4">
      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Title</h1>
              <span class="text-red-500 ml-1">*</span>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter Article Title</p>
          </div>
          <div class="w-1/2">
            <UInput placeholder="Enter Article Title" size="md" v-model="formData.title" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Description</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter Article Description</p>
          </div>
          <div class="w-1/2">
            <UTextarea placeholder="Enter Article Description" size="md" v-model="formData.description" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Learning Objectives</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter key learning objectives</p>
          </div>
          <div class="w-1/2">
            <UTextarea placeholder="Enter Learning Objectives" size="md" v-model="formData.objectives" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Audiences</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Select one or more article audiences</p>
          </div>
          <div class="w-1/2">
            <USelectMenu v-model="formData.audience" :options="audienceOptions" multiple placeholder="Select Audience" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Word Count</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter the desired word count</p>
          </div>
          <div class="w-1/2">
            <UInput type="number" placeholder="Enter Article Word Count" size="md" v-model="formData.wordCount" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UButton block class="text-center" icon="i-heroicons-arrow-right-16-solid" trailing type="submit">Continue
      </UButton>
    </UForm>

    <UForm :schema="objectiveFormSchema" :state="formData" @submit="onSubmit" class="w-full flex flex-col gap-4">
      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Title</h1>
              <span class="text-red-500 ml-1">*</span>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter Article Title</p>
          </div>
          <div class="w-1/2">
            <UInput placeholder="Enter Article Title" size="md" v-model="formData.title" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Description</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter Article Description</p>
          </div>
          <div class="w-1/2">
            <UTextarea placeholder="Enter Article Description" size="md" v-model="formData.description" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Learning Objectives</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter key learning objectives</p>
          </div>
          <div class="w-1/2">
            <UTextarea placeholder="Enter Learning Objectives" size="md" v-model="formData.objectives" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Audiences</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Select one or more article audiences</p>
          </div>
          <div class="w-1/2">
            <USelectMenu v-model="formData.audience" :options="audienceOptions" multiple placeholder="Select Audience" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UFormGroup required class="px-4 py-4 border-b">
        <div class="flex items-center">
          <div class="w-1/2 pr-4">
            <div class="flex items-center">
              <h1 class="text-xl text-gray-800 font-bold">Word Count</h1>
            </div>
            <p class="text-sm text-gray-500 mt-1 whitespace-normal">Enter the desired word count</p>
          </div>
          <div class="w-1/2">
            <UInput type="number" placeholder="Enter Article Word Count" size="md" v-model="formData.wordCount" class="w-full"/>
          </div>
        </div>
      </UFormGroup>

      <UButton block class="text-center" icon="i-heroicons-arrow-right-16-solid" trailing type="submit">Continue
      </UButton>
    </UForm>

and my onSubmit:

async function onSubmit(event: FormSubmitEvent<schemaType>) {
  console.log("calling")
  props.callback(event.data);
}

async function onSubmit(event: FormSubmitEvent<schemaType>) {
  console.log("calling")
  props.callback(event.data);
}

10 replies

NNuxt

•Created by Just Simeon on 11/15/2024 in #❓・help

How can I change my formgroup so it looks similar as seen on the picture?

14 replies

NNuxt

•Created by Just Simeon on 11/12/2024 in #❓・help

UForm doesn't accept type import for schema

I have an exported const in a different file that has my zod schema. when I try to specify the schema in :schema in my UForm, I get this:

vue: Property formSchema does not exist on type
CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, { state: { title: string; description: string; objectives: string; }; onSubmit: (event: FormSubmitEvent<{ title: string; description: string; objectives: string; }>) => Promise<...>; }, ... 23 more ..., {}>

vue: Property formSchema does not exist on type
CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, { state: { title: string; description: string; objectives: string; }; onSubmit: (event: FormSubmitEvent<{ title: string; description: string; objectives: string; }>) => Promise<...>; }, ... 23 more ..., {}>

even though it works fine in other places

10 replies

NNuxt

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

Text input in context menu

Is it possible to add a text input inside a context menu?

4 replies

Gaming

Programming