Just Simeon Posts - Answer Overflow

Just Simeon

•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 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

NNuxt

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

Keep devtools enabled after build

Hey so, we have a stage deployment of our app in which we would like the devtools to stay active, how would we achieve that? we are using yarn build

18 replies

NNuxt

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

Deployment on Cloud Run

Hey so I tried following this guide: https://cloud.google.com/run/docs/quickstarts/frameworks/deploy-nuxtjs-service to deploy my nuxt 3 app to cloud run. while building the image worked flawlessly, clod run tries to execute "yarn start" in order to start the app. It appears something has changed since this guide was made and I will need some assistance to get it running. I am using Nuxt with the v4-compat template and the ui module. so far nothing has been added to the app.

5 replies

NNuxt

•Created by Just Simeon on 10/17/2024 in #❓・help

Expose endpoints only internally

Hey, for our use-case I would like to prevent users from directly accessing the API. I would like to make it so only nuxt is able to access the nitro endpoints and return a 403 if someone directly tries to access them.

2 replies

NNuxt

•Created by Just Simeon on 7/18/2024 in #❓・help

how to get the Content-Disposition header

Hello, in the script section of my page I am getting a file from by spring Backend. its a blob response and I need the file name, however the content-disposition is not exposed in the $fetch response. Also using $fetch.raw doesn't help.

2 replies

NNuxt

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

Help with exporting composable from Custom Module [Still need help]

Hey so I am working on a Nuxt 3 Module that adds support for Neo4J. I have come pretty far and the Module is on npm and also on github https://github.com/DerSimeon/NeoNuxt Unfortunately when I try to use it, I get this error:

Package subpath './dist/runtime/server/composables/NeoDriver' is not defined by "exports" in G:\Project X\Web\apply\node_modules\neonuxt\package.json imported from G:\Project X\Web\apply\.nuxt\dev\index.mjs

Does anyone know how to fix it?

32 replies

NNuxt

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

Package import specifier "#imports" is not defined

Hey as you can see from the Title I am experiencing this error. I am running Nuxt 3 (with v4 compat) and color-mode is giving that error once I open my website. these are my packages:

"dependencies": {
    "@nuxt/ui": "^2.17.0",
    "nuxt": "^3.12.2",
    "nuxt-auth-utils": "^0.1.0",
    "nuxt-neo4j": "^0.0.4",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3",
    "zod": "^3.23.8"
  },

"dependencies": {
    "@nuxt/ui": "^2.17.0",
    "nuxt": "^3.12.2",
    "nuxt-auth-utils": "^0.1.0",
    "nuxt-neo4j": "^0.0.4",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3",
    "zod": "^3.23.8"
  },

and this is the full error:

[nuxt] [request error] [unhandled] [500] Package import specifier "#imports" is not defined in package G:\Project X\Web\account\node_modules\@nuxtjs\color-mode\package.json imported from G:\Project X\Web\account\node_modules\@nuxtjs\color-mode\dist\runtime\plugin.server.mjs
  at __node_internal_captureLargerStackTrace (node:internal/errors:497:5)
  at new NodeError (node:internal/errors:406:5)
  at importNotDefined (node:internal/modules/esm/resolve:257:10)
  at packageImportsResolve (node:internal/modules/esm/resolve:678:9)
  at moduleResolve (node:internal/modules/esm/resolve:832:16)
  at defaultResolve (node:internal/modules/esm/resolve:1043:11)
  at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
  at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
  at link (node:internal/modules/esm/module_job:84:36)

[nuxt] [request error] [unhandled] [500] Package import specifier "#imports" is not defined in package G:\Project X\Web\account\node_modules\@nuxtjs\color-mode\package.json imported from G:\Project X\Web\account\node_modules\@nuxtjs\color-mode\dist\runtime\plugin.server.mjs
  at __node_internal_captureLargerStackTrace (node:internal/errors:497:5)
  at new NodeError (node:internal/errors:406:5)
  at importNotDefined (node:internal/modules/esm/resolve:257:10)
  at packageImportsResolve (node:internal/modules/esm/resolve:678:9)
  at moduleResolve (node:internal/modules/esm/resolve:832:16)
  at defaultResolve (node:internal/modules/esm/resolve:1043:11)
  at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
  at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
  at link (node:internal/modules/esm/module_job:84:36)

6 replies

NNuxt

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

Looking for Auth Advice

Hello, I am looking for some guidance on how to make my Authentication. I have multiple nuxt apps that will all share the same user account. I would like to have a central login. My current Idea would be: Lets say I want to login to test.example.com, it will then redirect me to account.example.com?redirect=https://text.example.com/auth/callback where I will be prompted to login with Discord (Discord will be the only login provider) and after that it will redirect me back to text.example.com/auth/callback?code=JWT_OR_Something_like_that Is there a better solution to this? I will like to not use any third party software such as keycloak

2 replies

NNuxt

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

Min Values for Number Inputs, labels for Inputs

Hello, is there an easy way to add minimum values for numerical inputs and also a way to prevent exponents (e) from being used? Also I see there is no integrated way to add Labels to Inputs, would that be something that could be added?

2 replies

NNuxt

•Created by Just Simeon on 5/24/2024 in #❓・help

500 | Cannot find module global/window

Hey, after building my app and uploading it I get this:

Cannot find module '/var/www/vod-stage/server/node_modules/global/window' imported from /var/www/vod-stage/server/chunks/build/index-Dh3Vhq6T.mjs Did you mean to import global/window.js?

Anyone know what to do? @ me please

3 replies

NNuxt

•Created by Just Simeon on 5/14/2024 in #❓・help

Subdomain for the API

Hey, I want to use Nuxt for a project. For the Frontend itself I only need Endpoints from the server folder. However I would like to have a dedicated subdomain only for the api. so when I do https://api.somedomain.com/api/v1/hello the request will go to nitro instead of to the frontend. Is that somehow possible?

4 replies

NNuxt

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

lru-cache missing [Unresolved]

Hey I updated our nuxt3 frontend today using nuxt upgrade and also updated all deps. Unfortunately when building the Project and pushing it to our server we can't run it because of this error: Cannot find package 'lru-cache' imported from /var/www/vod-stage/server/index.mjs. yarn dev locally and also using node .output/server/index.mjs locally in the project works, but not when build.

17 replies

Gaming

Programming