IsaacR943
IsaacR943
PostsComments
NNuxt
Created by IsaacR943 on 1/21/2025 in #❓・help
which logger works with nuxt?
Im running nuxt with bun and I really couldnt find ANY logger that worked. I just want to efficiently append the logs into a log file but NO logger worked. Not bun.sinkfiles, or winston, or pino, or bunyia. None
4 replies
NNuxt
Created by IsaacR943 on 1/20/2025 in #❓・help
Bun not found in nuxt application?
This is the file im trying to apply on my app - route: utils/logger.vue 
// utils/logger.vue
import Bun from 'bun';

const file = Bun.file("foo.log");
const writer = file.writer();

export { writer };
// utils/logger.vue
import Bun from 'bun';

const file = Bun.file("foo.log");
const writer = file.writer();

export { writer };
The code works, i do see the output in foo.log. However, after that the app crashes saying there is no module bun defined. This is every weird and cant find documentation on the problem implementation: 
// pages/index.vue
<script setup lang="ts">
const route = useRoute()
import { writer } from '~/utils/logger'

async function testWrite() {
    await writer.write("We are at the index app");
    await writer.end(); // Don't forget to close the writer when done
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>
// pages/index.vue
<script setup lang="ts">
const route = useRoute()
import { writer } from '~/utils/logger'

async function testWrite() {
    await writer.write("We are at the index app");
    await writer.end(); // Don't forget to close the writer when done
}

testWrite();
</script>

<template>
  <div>
    <h1>Nuxt Routing set up successfully!</h1>
    <p>Current route: {{ route.path }}</p>
    <a href="https://nuxt.com/docs/getting-started/routing" target="_blank">Learn more about Nuxt Routing</a>
  </div>
</template>
5 replies
NNuxt
Created by IsaacR943 on 1/18/2025 in #❓・help
.nuxtignore
Can i use .nuxtignore for a static file in my server directory?
5 replies
NNuxt
Created by IsaacR943 on 1/18/2025 in #❓・help
use .nuxtignore to serve static file from server
my goal is to make a static file inaccessible to the public internet and available for my server. Can I use .nuxtingore for a route at my server directory?
4 replies
NNuxt
Created by IsaacR943 on 1/18/2025 in #❓・help
SQLITE in production
The thing is - most apps dont have enough traffic to make necessary real -con current writes. And with the command PRAGMA journal_mode = WAL; for concurrent writes with sqilite I really dont understand why I should use it in a project. (Disclamer for nerds) I want to use sqlite in my nuxt application. Figured out the easiest way to deploy is within the server directory. Is the server directory accessible from the public internet? Will nuxt break if i put a file .db in this directory? Ideally I want a location where apis can read from and since sqlite only manages file permission I must place the .db file in a path inaccessible form the public internet.
6 replies
NNuxt
Created by IsaacR943 on 1/11/2025 in #❓・help
Common Nitro Gotchas when proxying to wordpress instance
I want to set up a reverse proxy to harness SEO capabilities of worpdress. The end goal is to set up something like a reverse proxy so when the user visit my nuxt app at the route /blog the server fetch content to the user from the wordpress instance. Im aware nitro has built in server rules - however i fear this are not optimize for large quantities of traffic.
6 replies
NNuxt
Created by IsaacR943 on 1/4/2025 in #❓・help
i18n - Error on redirects
So i need to find a configuration that always redirect the user to {locale}/path. Currently it redirects to /path which results in a 404 since i18n module requires the locale. Under normal circumstances this wouldnt be needed - i18n is configured to always redirect to a locale, however i dont have very clear why it redirects the user to /path when the user is already log in. It is likely a problem between the interaction of different modules since i have supabase auth module and i18n installed. Figured out i need some additional middleware that guarantees the user will always default to /locale/path every time it tries to visit /path. What is this configuration at i18n? are other people experiencing similar problems?
7 replies
NNuxt
Created by IsaacR943 on 12/31/2024 in #❓・help
Radix direct auto-import breaking
Anyone has experience trouble using radix vue? So I installed the module on my nuxt application and tried to use the library. No matter what i do and how many times i reinstall the library the app breakes with the next error: 
[plugin:vite:import-analysis] Importing directly from module entry-points is not allowed. [importing `radix-vue` from `components/app/metadata/squareOptions/meta/DialogOptions.vue`]
/Users/Documents/GitHub/myprojectlol/app/components/app/metadata/squareOptions/meta/DialogOptions.vue:126:133
124|  import _export_sfc from 'plugin-vue:export-helper'
125|  
126|  import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from 'radix-vue';
   |                                                                                                                                      ^
127|  export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/joshuarodriguez/Docum
[plugin:vite:import-analysis] Importing directly from module entry-points is not allowed. [importing `radix-vue` from `components/app/metadata/squareOptions/meta/DialogOptions.vue`]
/Users/Documents/GitHub/myprojectlol/app/components/app/metadata/squareOptions/meta/DialogOptions.vue:126:133
124|  import _export_sfc from 'plugin-vue:export-helper'
125|  
126|  import { DialogRoot, DialogTrigger, DialogOverlay, DialogTitle, DialogClose, DialogDescription, DialogContent, DialogPortal } from 'radix-vue';
   |                                                                                                                                      ^
127|  export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/joshuarodriguez/Docum
9 replies
NNuxt
Created by IsaacR943 on 12/31/2024 in #❓・help
layers a comprehensive guide
The docs for nuxt3 sucks. The subject is complex, the guides too short or non existent, ton of caveats trying to deploy them. The alternative, i believe, is understand what layers are built on. What features of vue are nuxt layers built on?
7 replies
NNuxt
Created by IsaacR943 on 11/22/2024 in #❓・help
Bizzare error with whole screen split in two
For some reason and out of nowhere, the app now renders twice. Yes, in one path all the components are rendered twice.
6 replies
NNuxt
Created by IsaacR943 on 11/19/2024 in #❓・help
Error deploying to fly.io
Deploying a nuxt app in fly.io is usually very easy. The fly cli handles everything for you. However, its the first time im using layers in a project and the usual process and configuration doesnt work. Got: 
=> ERROR [build 5/6] RUN bun --bun run build                                                                                        2.1s
 > [build 5/6] RUN bun --bun run build:                                                                         
0.064 $ nuxt build                                                                                              
0.407 Nuxt 3.14.159 with Nitro 2.10.3                                                                           
1.601  WARN  Cannot extend config from ../nuxtLayers/authentication2 in /app
1.622  WARN  Cannot extend config from ../nuxtLayers/frontPageComponents in /app
1.640  WARN  Cannot extend config from ../nuxtLayers/checkountnpricing2 in /app
1.661  WARN  Cannot extend config from ../nuxtLayers/basicForms in /app
1.877 [nuxt:tailwindcss] ℹ Using default Tailwind CSS file
1.984  WARN  Missing supabase url, set it either in nuxt.config.js or via env variable
1.985  WARN  Missing supabase anon key, set it either in nuxt.config.js or via env variable
2.075  ERROR  Nuxt module should be a function: @nuxt/image
2.075   at <anonymous> (node_modules/@nuxt/kit/dist/index.mjs:2460:15)
2.075   at processTicksAndRejections (native:7:39) 
2.075  ERROR  Nuxt module should be a function: @nuxt/image
2.091 error: script "build" exited with code 1
=> ERROR [build 5/6] RUN bun --bun run build                                                                                        2.1s
 > [build 5/6] RUN bun --bun run build:                                                                         
0.064 $ nuxt build                                                                                              
0.407 Nuxt 3.14.159 with Nitro 2.10.3                                                                           
1.601  WARN  Cannot extend config from ../nuxtLayers/authentication2 in /app
1.622  WARN  Cannot extend config from ../nuxtLayers/frontPageComponents in /app
1.640  WARN  Cannot extend config from ../nuxtLayers/checkountnpricing2 in /app
1.661  WARN  Cannot extend config from ../nuxtLayers/basicForms in /app
1.877 [nuxt:tailwindcss] ℹ Using default Tailwind CSS file
1.984  WARN  Missing supabase url, set it either in nuxt.config.js or via env variable
1.985  WARN  Missing supabase anon key, set it either in nuxt.config.js or via env variable
2.075  ERROR  Nuxt module should be a function: @nuxt/image
2.075   at <anonymous> (node_modules/@nuxt/kit/dist/index.mjs:2460:15)
2.075   at processTicksAndRejections (native:7:39) 
2.075  ERROR  Nuxt module should be a function: @nuxt/image
2.091 error: script "build" exited with code 1
10 replies
NNuxt
Created by IsaacR943 on 11/13/2024 in #❓・help
Make explicit auto import of a component
<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'
<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'
5 replies
NNuxt
Created by IsaacR943 on 11/13/2024 in #❓・help
Disable auto components
Is it possible to disable auto import ONLY components for ONLY a specific page?
5 replies
NNuxt
Created by IsaacR943 on 11/13/2024 in #❓・help
Layer doesnt import module
I have the Supabase module installed in a layer, along with several components, each with its own functionality. When I use this layer via extend in the main application, the components from the Supabase layer appear, but their functionality doesn’t work. The error message is clear: the useSupabaseClient composable from the Supabase layer isn’t available, even though this composable is provided by the module. What could be causing this issue? (Note: the base application doesn’t have the Supabase module itself—I thought that if the layer were imported correctly, it should include the module as well.) 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  extends: ['../nuxtLayers/authentication2'],
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    'radix-vue/nuxt',
    '@vueuse/nuxt'
  ],
  runtimeConfig: {
    public: {
      PADDLE_ENVIRONMENT: process.env.PADDLE_ENVIRONMENT,
      PADDLE_FRONT_TOKEN: process.env.PADDLE_FRONT_TOKEN,
    },
  },
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    serviceKey: process.env.SUPABASE_SERVICE_KEY,
    clientOptions: {
      auth: {
        flowType: 'pkce',
        autoRefreshToken: true,
              detectSessionInUrl: true,
              persistSession: false,
      },
    },
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      include: undefined,
      exclude: ['/','/signout','/settings','/help'],
      cookieRedirect: false,}}})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  extends: ['../nuxtLayers/authentication2'],
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    'radix-vue/nuxt',
    '@vueuse/nuxt'
  ],
  runtimeConfig: {
    public: {
      PADDLE_ENVIRONMENT: process.env.PADDLE_ENVIRONMENT,
      PADDLE_FRONT_TOKEN: process.env.PADDLE_FRONT_TOKEN,
    },
  },
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    serviceKey: process.env.SUPABASE_SERVICE_KEY,
    clientOptions: {
      auth: {
        flowType: 'pkce',
        autoRefreshToken: true,
              detectSessionInUrl: true,
              persistSession: false,
      },
    },
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      include: undefined,
      exclude: ['/','/signout','/settings','/help'],
      cookieRedirect: false,}}})
Uncaught (in promise) ReferenceError: useSupabaseClient is not defined
    at setup (authenticationSigninLogin.vue:2:18)
      ...
    at processFragment (runtime-core.esm-bundler.js?v=6c5563d9:5099:7)
    at patch (runtime-core.esm-bundler.js?v=6c5563d9:4659:9)
Uncaught (in promise) ReferenceError: useSupabaseClient is not defined
    at setup (authenticationSigninLogin.vue:2:18)
      ...
    at processFragment (runtime-core.esm-bundler.js?v=6c5563d9:5099:7)
    at patch (runtime-core.esm-bundler.js?v=6c5563d9:4659:9)
5 replies
NNuxt
Created by IsaacR943 on 11/13/2024 in #❓・help
Import layer with supabase module
Hello, so i have a layer that takes care of the auth in the application Im using supabase module for all the auth and it works well on the layer However, when i try to expand the origin app i got this error on the console 
nuxtLayers/authentication/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=393341da' does not provide an export named 'default'
nuxtLayers/authentication/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=393341da' does not provide an export named 'default'
I understand only superficially the error - there is no default export name in the file at the node module. However 1) i dont know what is trying to use this 'default' value 2) im not aware what this default value contains 3) since this error doesnt appear on the origin layer idk what could cause it. The app doesnt crashes, the routes are protected so i assume the layer was imported properly. However, the menu on the main app is broken, its no longer possible to navigate between pages in the app with the menu if I import the layer. Not sure where to start to solve this problem
6 replies
NNuxt
Created by IsaacR943 on 11/5/2024 in #❓・help
nuxt 4 release date
When is the Nuxt 4 release date scheduled?
4 replies
NNuxt
Created by IsaacR943 on 11/5/2024 in #❓・help
Layers nuxt 4
Hello, im about to use layers for the first time Should i wait a little longer to start learning about layers or the current set up with nuxt3 is fully compatible? - Are nuxt 3 layers compatible with nuxt 4? - Is this video up to date? - Is documentation up to date? Thank you!
5 replies
NNuxt
Created by IsaacR943 on 11/3/2024 in #❓・help
Deactive jump to the top
Hey, so is no longer possible to deactivate jump to the top in nuxt? (apparently this no longer is possible?) 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})
6 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: Vue / vite error No clue how to solve this. Context - I have one layout passing props to the only slot. The props in this slot are used by all pages. For some reason the code breaks with the next implementation 
// layout.vue
<main>
       <slot
      :headerContent="header"
      :keyPartnerships="key_partnerships"
      :keyActivities="key_activities"
      :keyResources="key_resources"
   ></slot>
  
    </main>
// layout.vue
<main>
       <slot
      :headerContent="header"
      :keyPartnerships="key_partnerships"
      :keyActivities="key_activities"
      :keyResources="key_resources"
   ></slot>
  
    </main>
// component that uses the slot
     <template v-slot="{ headerContent, ... }" >

        <dynamicScrollCard title="🧑🏻‍🤝‍🧑🏻 Key Partners" content="another content" :mykey="keyPartnerships" />
....
      </template>
// component that uses the slot
     <template v-slot="{ headerContent, ... }" >

        <dynamicScrollCard title="🧑🏻‍🤝‍🧑🏻 Key Partners" content="another content" :mykey="keyPartnerships" />
....
      </template>
im sure it has to do with templates.
2 replies
NNuxt
Created by IsaacR943 on 9/29/2024 in #❓・help
Stuck with reactivity not working
Gpt, claude, meta, asked everywhere. Seems there isnt a solid response why this snippet isnt working. 
<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});
<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});
Context: props.mykey is a changing value. When the value matches some key at the redis database the template should show that redis value. The function await read_redis_key(key) work and logs line 50 and line 51 show the expected result. However, on the template this snippet is showing up as empty (undefined) 
  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>
  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>
7 replies