IsaacR943 Posts - Answer Overflow

Topics

IsaacR943

•Created by IsaacR943 on 2/11/2025 in #❓・help

Cloudflare pages 404?

im in nuxt an i deploy with cloudflare pages. When i visit the site a 404 show up and i have to click 'go home' that uses router link to '/' to see the actual page. This is very odd because when i visit the same path 'myapp.com' or 'myapp.com/' the error 404. Despite this when i click 'go home' (set to go to the route '/' ) it shows the page. Doesnt make any sense

8 replies

•Created by IsaacR943 on 1/28/2025 in #❓・help

Formkit undefined _withMods in simple form

The application errored with 500 Cannot read properties of undefined (reading '_withMods') I assume this is cause bc following component:

<template>
    <FormKit
type="form"
id="registrationForm"
@submit="handleSubmit"
:actions="false" >
      <FormKit
type="text"
name="name"
label="Name"
validation="required"
validation-label="Name"
placeholder="Enter your name"/>
  
      <FormKit
type="email"
name="email"
label="Email"
validation="required|email"
validation-label="Email"
placeholder="Enter your email"
      />
  
      <FormKit
        type="password"
        name="password"
        label="Password"
        validation="required|length:8"
        :validation-messages="{
          length: 'Password must be at least 8 characters long'
        }"
        validation-label="Password"
        placeholder="Create your password"
      />
  
      <FormKit
        type="password"
        name="confirmPassword"
        label="Confirm Password"
        validation="required|confirm"
        validation-label="Password Confirmation"
        placeholder="Confirm your password"
        :validation-rules="{ confirm: confirmPassword }"
        :validation-messages="{ 
          confirm: 'Passwords do not match'
        }"
      />
  
      <FormKit
        type="text"
        name="code"
        label="Verification Code"
        validation="required"
        validation-label="Code"
        placeholder="Enter verification code"
      />
      <FormKit
        type="submit"
        label="Register"
        input-class="submit-button"
      />
    </FormKit>
  </template>
  
  <script setup>
  const confirmPassword = (node) => {
    return node.value === node.at('..').value?.password
  }
  
  const handleSubmit = async (formData) => {
    try {
      console.log('Registration submitted:', formData)
      // Add your registration logic here
    } catch (error) {
      console.error('Registration error:', error)
    }
  }
  </script>

<template>
    <FormKit
type="form"
id="registrationForm"
@submit="handleSubmit"
:actions="false" >
      <FormKit
type="text"
name="name"
label="Name"
validation="required"
validation-label="Name"
placeholder="Enter your name"/>
  
      <FormKit
type="email"
name="email"
label="Email"
validation="required|email"
validation-label="Email"
placeholder="Enter your email"
      />
  
      <FormKit
        type="password"
        name="password"
        label="Password"
        validation="required|length:8"
        :validation-messages="{
          length: 'Password must be at least 8 characters long'
        }"
        validation-label="Password"
        placeholder="Create your password"
      />
  
      <FormKit
        type="password"
        name="confirmPassword"
        label="Confirm Password"
        validation="required|confirm"
        validation-label="Password Confirmation"
        placeholder="Confirm your password"
        :validation-rules="{ confirm: confirmPassword }"
        :validation-messages="{ 
          confirm: 'Passwords do not match'
        }"
      />
  
      <FormKit
        type="text"
        name="code"
        label="Verification Code"
        validation="required"
        validation-label="Code"
        placeholder="Enter verification code"
      />
      <FormKit
        type="submit"
        label="Register"
        input-class="submit-button"
      />
    </FormKit>
  </template>
  
  <script setup>
  const confirmPassword = (node) => {
    return node.value === node.at('..').value?.password
  }
  
  const handleSubmit = async (formData) => {
    try {
      console.log('Registration submitted:', formData)
      // Add your registration logic here
    } catch (error) {
      console.error('Registration error:', error)
    }
  }
  </script>

I dont know what the error is

4 replies

•Created by IsaacR943 on 1/28/2025 in #❓・help

Cant make any logger work in a clean nuxt application

I started a vainilla nuxt app and cant make any logger to a file work. The latest I tried was log4js Specs:

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n']
})

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "log4js": "^6.9.1",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^9.1.3"
  }
}

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n']
})

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "log4js": "^6.9.1",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^9.1.3"
  }
}

Im trying to run the next code:

// utils/logger.js
import log4js from 'node_modules/log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");

// pages/index.vue
<script setup lang="ts">
// now for script set up
logger.error("Inside the pages index - error");
logger.debug("Inside the pages index - debug");
</script>
<template>
    <div>
        some default value
    </div>
</template>

// utils/logger.js
import log4js from 'node_modules/log4js';

log4js.configure({
  appenders: {
    err: {
      type: "file",
      filename: "./logs/errors.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    },
    info: {
      type: "file",
      filename: "./logs/info.log",
      layout: {
        type: "pattern",
        pattern: '{"timestamp": "%d", "loglevel": "%p" , "logcategory": "%c" ,"message": "%m" , "path": "%f","line": "%l", "method": "%M" }'
      }
    }
  },
  categories: { 
    default: { appenders: ["err","info"], level: "debug", enableCallStack: true },
  }
});

export const logger = log4js.getLogger("err");

// pages/index.vue
<script setup lang="ts">
// now for script set up
logger.error("Inside the pages index - error");
logger.debug("Inside the pages index - debug");
</script>
<template>
    <div>
        some default value
    </div>
</template>

Error:

500
Cannot find module './configuration' Require stack: - /Users/laptop/Documents/GitHub/tinderData3/app/node_modules/log4js

500
Cannot find module './configuration' Require stack: - /Users/laptop/Documents/GitHub/tinderData3/app/node_modules/log4js

18 replies

•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

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

14 replies

•Created by IsaacR943 on 1/18/2025 in #❓・help

.nuxtignore

Can i use .nuxtignore for a static file in my server directory?

5 replies

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

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

nuxt 4 release date

When is the Nuxt 4 release date scheduled?

4 replies

•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