Lannister Posts - Answer Overflow

Lannister

•Created by Lannister on 7/6/2024 in #❓・help

Undesired Route Path Casing Override in i18n module

Reproduction Navigate to the login screen, the original route path is /auth/signin, not /Auth/Signin This discrepancy is due to the i18n route override process, which takes into account the casing of the actual files or folders in the pages directory. This behavior contrasts with Nuxt and its router, which normalize all paths to lowercase. Live Version Github Repo It would be preferable for this behavior to be configurable via a flag, rather than needing the creation of a plugin or middleware to address this undesired outcome.

7 replies

NNuxt

•Created by Lannister on 6/14/2024 in #❓・help

Layers under ~/layers not auto-registered in v3.12.1

Nuxt question: Layers under ~/layers not auto-registered in v3.12.1 I've created a small repo with a live version to reproduce it.

root/
└── apps/
    ├── skriptjobs-app/
    │   └── layers/
    │       ├── skriptjobs-public-web/
    │       └── skriptjobs-user-interface/
    └── skriptjobs-base/

root/
└── apps/
    ├── skriptjobs-app/
    │   └── layers/
    │       ├── skriptjobs-public-web/
    │       └── skriptjobs-user-interface/
    └── skriptjobs-base/

skriptjobs-app is extending 3 layers in nuxt.config.ts

extends: [
// nuxt.config.ts in skriptjobs-app
'@skriptjobs/base',
'layers/skriptjobs-public-web',
'layers/skriptjobs-user-interface'],

extends: [
// nuxt.config.ts in skriptjobs-app
'@skriptjobs/base',
'layers/skriptjobs-public-web',
'layers/skriptjobs-user-interface'],

This way, everything works, no issues. Now, I want the layers in ./layers/** to be auto-registered But its not auto-registering anything, if I dont manually specify the layers manually.

// nuxt.config.ts in skriptjobs-app
extends: ['@skriptjobs/base'],

// nuxt.config.ts in skriptjobs-app
extends: ['@skriptjobs/base'],

What am I doing wrong? I'm running v3.12.1 https://nuxt-layers-registration.vercel.app/ repo: https://github.com/santiagoaloi/nuxt-layers-registration

2 replies

NNuxt

•Created by Lannister on 3/17/2024 in #❓・help

Uncaught TypeError: Cannot read properties of undefined (reading 'baseURL')

Only when pre-rendering my homepage in production, I see this error in the console: Uncaught TypeError: Cannot read properties of undefined (reading 'baseURL') I disabled code minification to see the clear code in the production build:

const appConfig = useRuntimeConfig$1().app;
const baseURL = () => appConfig.baseURL; //Complains here.
const buildAssetsDir = () => appConfig.buildAssetsDir;
const buildAssetsURL = (...path) => joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path);
const publicAssetsURL = (...path) => {
  const publicBase = appConfig.cdnURL || appConfig.baseURL;
  return path.length ? joinRelativeURL(publicBase, ...path) : publicBase;
};

{
  globalThis.__buildAssetsURL = buildAssetsURL;
  globalThis.__publicAssetsURL = publicAssetsURL;
}

const appConfig = useRuntimeConfig$1().app;
const baseURL = () => appConfig.baseURL; //Complains here.
const buildAssetsDir = () => appConfig.buildAssetsDir;
const buildAssetsURL = (...path) => joinRelativeURL(publicAssetsURL(), buildAssetsDir(), ...path);
const publicAssetsURL = (...path) => {
  const publicBase = appConfig.cdnURL || appConfig.baseURL;
  return path.length ? joinRelativeURL(publicBase, ...path) : publicBase;
};

{
  globalThis.__buildAssetsURL = buildAssetsURL;
  globalThis.__publicAssetsURL = publicAssetsURL;
}

3 replies

NNuxt

•Created by Lannister on 3/14/2024 in #❓・help

Best Practice for Logging Raw Headers on the First Request in Nuxt

I'm working on a Nuxt project and I need to log the raw headers, but I only want to do this on the first request. Currently, I have the following implementation:

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('request', (req) => {
    console.log(req.node.req.rawHeaders) // log raw headers...
  })
})

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('request', (req) => {
    console.log(req.node.req.rawHeaders) // log raw headers...
  })
})

However, this logs the raw headers for every request. How can I modify this code to only log the raw headers for the first request? Any insights or best practices on achieving this would be greatly appreciated. Thank you! 🙌

1 replies

NNuxt

•Created by Lannister on 2/24/2024 in #❓・help

Unable to Achieve Desired Library Auto-import Syntax in nuxt.config.ts

// I tried the following approaches, 
// intending to achive the following library 
// auto-import in SFCs

// import { * as yup } from 'yup',

// First non-wworking attempt:
❌ imports: {
  presets: [
    {
      from: 'yup',
      imports: [
        ['*', 'yup'] // import * as Yup from 'yup'
      ],
    },
  ],
  },

// Second non-wworking attempt:
❌ imports: {
  imports: [
    {
      yup: [
        ['*', 'yup'], // import * as Yup from 'yup'
      ],
    },
  ],
  },

// I tried the following approaches, 
// intending to achive the following library 
// auto-import in SFCs

// import { * as yup } from 'yup',

// First non-wworking attempt:
❌ imports: {
  presets: [
    {
      from: 'yup',
      imports: [
        ['*', 'yup'] // import * as Yup from 'yup'
      ],
    },
  ],
  },

// Second non-wworking attempt:
❌ imports: {
  imports: [
    {
      yup: [
        ['*', 'yup'], // import * as Yup from 'yup'
      ],
    },
  ],
  },

<script setup lang="ts">
// Desired result:
import { * as yup } from 'yup',
</script>

<script setup lang="ts">
// Desired result:
import { * as yup } from 'yup',
</script>

18 replies

Gaming

Programming