Just Simeon Posts - Answer Overflow

Just Simeon

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

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

NNuxt

•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

NNuxt

•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

NNuxt

•Created by Just Simeon on 1/23/2023 in #❓・help

Find Element by Ref

Hey, I am currently trying to make my Navbar scroll to my elements which I marked with ref="someName". The Problem is I am unsure how to access the refs, since the Navbar is its own component which I just add to my App.vue above my NuxtPage, so that every page has that navbar. How would I go ahead and access the refs (or somehow find by ref) and scroll to that element?

19 replies

NNuxt

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

Hydration Mismatch

Hey! currently in my Page, inside my template I am using a variable from a store I made. The Store uses a localStorage Variable. The Problem is when loading my Page I get Hydration Mismatches due to apparently the store not being ready and the value returning an empty String. What is the best way to wait for this variable to be available and ready before displaying it, to prevent Hydration Mismatches?

13 replies

Gaming

Programming