Just Simeon Posts - Answer Overflow

Topics

Just Simeon

•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

•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

•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

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

No description

14 replies

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•Created by Just Simeon on 5/27/2023 in #❓・help

Storing 2 values outside of a nuxt scope

Hey, I have a small class that does some fetching which I placed into lib/Fetcher.ts. While the code itself works, I want to store an access token and an expiration time, so I am not flooding the API with unncessary auth requests. this is my code: https://paste.teamhelios.dev/JKOl2pQb6X, and the problem parts are in line 1 and 2, it appears they are actually not saved (which kinda makes sense) Does anyone have an Idea how to properly do this? or maybe I have a wrong approach to begin with?

1 replies

•Created by Just Simeon on 3/21/2023 in #❓・help

Create custom TypeScript types and make the available globally

Hello, as you can read in the Title I want to create custom TypeScript Types. In React I had a folder names "types" in the root Directory. And while I can do the same thing here and also import them, once I reload the Page I get '/_nuxt/types/Message.ts' does not provide an export named 'Message' is ther a way to fix this?

49 replies

•Created by Just Simeon on 2/22/2023 in #❓・help

Pass data to Component in conditional rendered div

Hey, I am trying to make a "Toast" component which shows a little popup on the top left corner of the screen. The Popup itself appears but the 2 props I am passing are not getting rendered. This is the whole Toast class:

<script lang="ts" setup>
const props = defineProps({
  text: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
      <svg v-if="props.type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      <svg v-if="props.type === 'error'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Check icon</span>
    </div>
    <div class="ml-3 text-sm font-normal">{{ props.text }}</div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  text: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
      <svg v-if="props.type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      <svg v-if="props.type === 'error'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Check icon</span>
    </div>
    <div class="ml-3 text-sm font-normal">{{ props.text }}</div>
  </div>
</template>

And this is my v-if div:

  <div v-if="showToast">
    <Toast :text="toastMessage.value" :type="toastType.value"/>
  </div>

  <div v-if="showToast">
    <Toast :text="toastMessage.value" :type="toastType.value"/>
  </div>

this are my ref's which I am using for the data:

const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

and this is how I call the toast:

const triggerToast = (message: string, type: string) => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => {
    showToast.value = false
  }, 5000)
}

const triggerToast = (message: string, type: string) => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => {
    showToast.value = false
  }, 5000)
}

5 replies