IsaacR943 Comments - Answer Overflow

I will read the unjs docs and resolve my questions with gpt or kapa Layers is one of the features in my opinion set nuxt apart from others. However my main concerns are: - required additional optimization to 'deflate' the project - breaking changes in nuxt 4 (btw everyone is waiting for this update ❤️ )

7 replies

NNuxt

•Created by IsaacR943 on 12/31/2024 in #❓・help

Radix direct auto-import breaking

This is the component:

<script setup>
import { 
  SquareX 
} from 'lucide-vue-next'

import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from '#components';
</script>
<template>
    <DialogRoot>
     <DialogTrigger @click.stop class="inline-block">
        <div class="pointer-events-none">
          <slot>Default Tag</slot>
        </div>
      </DialogTrigger>
      <DialogPortal>
        <DialogOverlay 
          class="bg-blackA9/50 backdrop-blur-sm data-[state=open]:animate-overlayShow fixed inset-0 z-30" 
        />
        <DialogContent
          class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
        >
          <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
            <slot name="title">Title</slot>
          </DialogTitle>
          <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
             <slot name="description">description</slot>
          </DialogDescription>
             
          <DialogClose
            class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center focus:shadow-[0_0_0_2px] focus:outline-none"
            aria-label="Close"
          >
            <SquareX/>
          </DialogClose>
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  </template>

<script setup>
import { 
  SquareX 
} from 'lucide-vue-next'

import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from '#components';
</script>
<template>
    <DialogRoot>
     <DialogTrigger @click.stop class="inline-block">
        <div class="pointer-events-none">
          <slot>Default Tag</slot>
        </div>
      </DialogTrigger>
      <DialogPortal>
        <DialogOverlay 
          class="bg-blackA9/50 backdrop-blur-sm data-[state=open]:animate-overlayShow fixed inset-0 z-30" 
        />
        <DialogContent
          class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
        >
          <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
            <slot name="title">Title</slot>
          </DialogTitle>
          <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
             <slot name="description">description</slot>
          </DialogDescription>
             
          <DialogClose
            class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center focus:shadow-[0_0_0_2px] focus:outline-none"
            aria-label="Close"
          >
            <SquareX/>
          </DialogClose>
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  </template>

9 replies

NNuxt

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

Error deploying to fly.io

If you do know how to optimize and deploy layers i would very much appreciate your tips

10 replies

NNuxt

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

Error deploying to fly.io

you will not like the answer but - after done my research it seems that layers add too much over head and even if you deploy the application you end up with a very heavy app (if you dont optimize each layer will have a similar weight and consume similar resources as a stand alone app would). The solutions was to manually copy paste everything into folders at the destination

10 replies

NNuxt

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

Error deploying to fly.io

yes

10 replies

NNuxt

•Created by IsaacR943 on 11/22/2024 in #❓・help

Bizzare error with whole screen split in two

useless. The solution was to wrap the asynnc omponent into <ClientOnly>

6 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Make explicit auto import of a component

update - a turn around is doing something like

import { NavbarLogoMain as Logo } from '#components'

import { NavbarLogoMain as Logo } from '#components'

5 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Disable auto components

can i make explicit the path fro the component to auto import? for instance import main from components/menu folder

5 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Import layer with supabase module

1. Packages are up to date 2. Module is compatible for w the nuxt version i use 3. Imposible to know where to adjust the import since the creteClient from supabase-js is not use on any of my files but rather somewhere in node_modules 4. transpile the library doesnt work 5. No way to know which versions of supabase would be conflicting. 6. Since no error is prompt on origin layer the configuration is done correctly - its a problem of the main app

6 replies

NNuxt

•Created by IsaacR943 on 11/3/2024 in #❓・help

Deactive jump to the top

Actually the way to do it is going to each of the pages and pasting on the script set up section:

definePageMeta({
  scrollToTop: false
})

definePageMeta({
  scrollToTop: false
})

6 replies

NNuxt

•Created by IsaacR943 on 9/29/2024 in #❓・help

Stuck with reactivity not working

bruh started yesterday with the framework chill - its just another js frmk

7 replies

NNuxt

•Created by IsaacR943 on 9/30/2024 in #❓・help

[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms firs

Update, this is a vue / vite error. I made the example as simple as possible and the thing still dont work. Example:

// layout.vue 
  <slot :headerContent="header"></slot>
// page.vue
 <template #default="{ headerContent }">
  <div>{{ headerContent }}</div>
</template>

// layout.vue 
  <slot :headerContent="header"></slot>
// page.vue
 <template #default="{ headerContent }">
  <div>{{ headerContent }}</div>
</template>

error:

 ERROR  Pre-transform error: Codegen node is missing for element/if/for node. Apply appropriate transforms first. 

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /pages/chat.vue?macro=true

 ERROR  Pre-transform error: Codegen node is missing for element/if/for node. Apply appropriate transforms first. 

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /pages/chat.vue?macro=true

2 replies

NNuxt

•Created by IsaacR943 on 9/29/2024 in #❓・help

Stuck with reactivity not working

that only using

my_redis_value

my_redis_value

instead of

my_redis_value.value

my_redis_value.value

(only for the template tho)

7 replies

NNuxt

•Created by IsaacR943 on 9/29/2024 in #❓・help

Stuck with reactivity not working

update - what solved the issue for me was changing the watch to:

watch(() => props.mykey, async (newKey) => {
  await fetchRedisValue(newKey);
  await nextTick();
  console.log('line 5x watchEffect - my_redis_value:', my_redis_value.value);
  isLoading.value = false;
});

watch(() => props.mykey, async (newKey) => {
  await fetchRedisValue(newKey);
  await nextTick();
  console.log('line 5x watchEffect - my_redis_value:', my_redis_value.value);
  isLoading.value = false;
});

7 replies

NNuxt

•Created by IsaacR943 on 9/29/2024 in #❓・help

Stuck with reactivity not working

LINE 6x show 'undefined' always, despite lines 50 and 51 show the proper result.

7 replies

Gaming

Programming