oemer Posts - Answer Overflow

oemer

Explore posts from servers

•Created by oemer on 8/2/2024 in #❓・help

How to use Nuxt Image ipx with S3 source + Caching?

I am fairly new to this topic and would like to know if you have any good pointers or resources I can check? I found this Image Optimization reposistory from AWS which is using sharp directly, but was hoping IPX could ease the complexity a bit: https://github.com/aws-samples/image-optimization/tree/4807b9e007cc26ed06baa1febeac2435860330cb

1 replies

NNuxt

•Created by oemer on 7/22/2024 in #❓・help

NuxtPicture sometimes slower than original?

1 replies

NNuxt

•Created by oemer on 7/4/2024 in #❓・help

How do I load CSS from node_modules dynamically?

I am trying it like this:

loadFont(font: Font) {
      if (state.fontsToLoad.includes(font)) return

      switch (font) {
        case "poppins": {
          import("@fontsource/poppins/index.css")
          import("@fontsource/poppins/400.css")
          import("@fontsource/poppins/700.css")
          break
        }
        case "open-sans": {
          import("@fontsource/open-sans/index.css")
          import("@fontsource/open-sans/400.css")
          import("@fontsource/open-sans/700.css")
          break
        }
      }

      state.fontsToLoad = [...state.fontsToLoad, font]
    },

loadFont(font: Font) {
      if (state.fontsToLoad.includes(font)) return

      switch (font) {
        case "poppins": {
          import("@fontsource/poppins/index.css")
          import("@fontsource/poppins/400.css")
          import("@fontsource/poppins/700.css")
          break
        }
        case "open-sans": {
          import("@fontsource/open-sans/index.css")
          import("@fontsource/open-sans/400.css")
          import("@fontsource/open-sans/700.css")
          break
        }
      }

      state.fontsToLoad = [...state.fontsToLoad, font]
    },

However, I am getting this error during build:

RollupError: Could not resolve "./index-a2b4a967.js" from "main/.nuxt/dist/server/_nuxt/<page-file-name>_-7b65df38.js"


undefined

 at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:17935:24)
  at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/node-entry.js:17995:58)
  at async node_modules/rollup/dist/es/shared/node-entry.js:17880:3

RollupError: Could not resolve "./index-a2b4a967.js" from "main/.nuxt/dist/server/_nuxt/<page-file-name>_-7b65df38.js"


undefined

 at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:17935:24)
  at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/node-entry.js:17995:58)
  at async node_modules/rollup/dist/es/shared/node-entry.js:17880:3

1 replies

NNuxt

•Created by oemer on 3/1/2024 in #❓・help

How too hook into a server response using Nuxt 3?

I need to hook in the response of /_ipx. If the image is corrupted /_ipx will throw an error, because it could not parse the image. So my goal is, if the optimization with /_ipx failed, I want to get the original image instead, without any optimization. Only if that fails too, I want to throw an error. Is that possible? I am using @nuxt/image

1 replies

NNuxt

•Created by oemer on 2/23/2024 in #❓・help

How can i catch a @nuxt/image error from ipx?

1 replies

NNuxt

•Created by oemer on 2/16/2024 in #❓・help

How to keep order of global middlewares with Nuxt Layers?

It seems that Nuxt Layers won't follow alphabetical order of global middlewares. The layer that extends another layer will always call his middlewares first. I also found a related stackoverflow question which explains it in more detail: https://stackoverflow.com/questions/77826748/order-of-middlewares-in-nuxt3-layers

3 replies

TTCTheo's Typesafe Cult

•Created by oemer on 10/25/2023 in #questions

` npx create t3-app@latest` returns `npm ERR! could not determine executable to run`

6 replies

NNuxt

•Created by oemer on 7/24/2023 in #❓・help

How to add a script tag dynamically on the server inside a plugin?

I am trying it like this:

export default defineNuxtPlugin((nuxt)=> {
  nuxt.hook("app:rendered", (renderContext) => { 
      renderContext.???.head.script.push()
  })
}

export default defineNuxtPlugin((nuxt)=> {
  nuxt.hook("app:rendered", (renderContext) => { 
      renderContext.???.head.script.push()
  })
}

1 replies

NNuxt

•Created by oemer on 7/24/2023 in #❓・help

What is the equivalent to `beforeNuxtRender` in Nuxt 3?

In Nuxt 2 it was in the plugin context:

export default function somePlugin(({ beforeNuxtRender }) => {})

export default function somePlugin(({ beforeNuxtRender }) => {})

In Nuxt 3 we have hooks, but there doesn't seem to be the right hook for that?

export default defineNuxtPlugin((nuxt) => {
  nuxt.hook()
})

export default defineNuxtPlugin((nuxt) => {
  nuxt.hook()
})

2 replies

NNuxt

•Created by oemer on 7/6/2023 in #❓・help

How to fix "[module] is not export by [path]" error during build, when it works on development?

Here is the error I get on yarn build

ERROR  "MasterDataClient" is not exported by "../../../packages/clients/dist/src/index.js", imported by "base/domains/master-data/useMasterDataApi.ts".
file: /Users/name/Documents/dev/app/frontend/app/base/domains/master-data/useMasterDataApi.ts:1:9
1: import { MasterDataClient } from "@workspace/clients"

ERROR  "MasterDataClient" is not exported by "../../../packages/clients/dist/src/index.js", imported by "base/domains/master-data/useMasterDataApi.ts".
file: /Users/name/Documents/dev/app/frontend/app/base/domains/master-data/useMasterDataApi.ts:1:9
1: import { MasterDataClient } from "@workspace/clients"

I had the same error in development and fixed it with:

  vite: {
    optimizeDeps: {
      include: ["@workspace/clients"],
    },
  }

  vite: {
    optimizeDeps: {
      include: ["@workspace/clients"],
    },
  }

This is the index.js it cannot import:

Object.defineProperty(exports, "__esModule", { value: true });
exports.MasterDataClient = __importStar(require("./clients/master-data-client"));
//...

Object.defineProperty(exports, "__esModule", { value: true });
exports.MasterDataClient = __importStar(require("./clients/master-data-client"));
//...

yarn dev works, but yarn build fails. It's a local yarn workspace package .

6 replies

NNuxt

•Created by oemer on 6/20/2023 in #❓・help

How to ignore an error in a nuxtApp.hook?

nuxtApp.hook("vue:error", (err: any) => {
    if (err?.message?.startsWith("No match for")) {
        // ignore error
    }
  })

nuxtApp.hook("vue:error", (err: any) => {
    if (err?.message?.startsWith("No match for")) {
        // ignore error
    }
  })

1 replies

NNuxt

•Created by oemer on 6/20/2023 in #❓・help

How to disable "no matched found for" error?

1 replies

NNuxt

•Created by oemer on 6/16/2023 in #❓・help

What is the replacement for `context.req` in a route middleware in nuxt 3?

I have an auth middleware, where I need the req when it's on the server. I have this kind of logic:

export default defineNuxtRouteMiddleware(async (to, from) => {
  const isomorphicAuth = process.server ? withSSRContext({ req: /* ??? */ }).Auth : Auth
  // ...
})

export default defineNuxtRouteMiddleware(async (to, from) => {
  const isomorphicAuth = process.server ? withSSRContext({ req: /* ??? */ }).Auth : Auth
  // ...
})

But in a route middleware you only have to and from In Nuxt 2 it worked like this:

export default async (context) => {
  const isomorphicAuth = process.server ? withSSRContext({ req: context.req }).Auth : Auth
  // ...
}

export default async (context) => {
  const isomorphicAuth = process.server ? withSSRContext({ req: context.req }).Auth : Auth
  // ...
}

2 replies

NNuxt

•Created by oemer on 6/16/2023 in #❓・help

What is the suggested alternative to layout middlewares in Nuxt 3?

In Nuxt 2 it was possible to define middlewares on layouts, this is no longer supported with Nuxt 3. I would like to avoid .global middleware, as these would be called on all pages, even if not needed?

<script lang="ts" setup>
//
definePageMeta({
  middleware: ["auth"], // definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
})
</script>

<script lang="ts" setup>
//
definePageMeta({
  middleware: ["auth"], // definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
})
</script>

6 replies

NNuxt

•Created by oemer on 4/28/2023 in #❓・help

Can i set `.env` file path inside `nuxt.config.ts`?

I know I can use yarn dev --dotenv ../.env. But I want to define this inside nuxt.config.ts. Is this possible?

10 replies

NNuxt

•Created by oemer on 4/27/2023 in #❓・help

Do I need to install dependencies of Layers I am extending in a monorepo?

If I don't install the dependencies of Layer I am extending, I get errors that modules can be found. I've tried several things. But the solutions don't work for all dependencies and are inconsistent... Here is an example: /base-layer nuxt.config.ts

import { createResolver } from "@nuxt/kit"
import vuetify from "vite-plugin-vuetify"
const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  css: [resolve("./node_modules/vuetify/lib/styles/main.sass")], // works
  modules: [resolve("./node_modules/@pinia/nuxt/dist/module.mjs")], // works
  alias: {
    pinia: resolve("./node_modules/pinia"), // works
    vuetify: resolve("./node_modules/vuetify") // still doesn't work: Cannot start nuxt:  Cannot find module 'vuetify/package.json' in /other-layer when runing `yarn dev`
  }
})

import { createResolver } from "@nuxt/kit"
import vuetify from "vite-plugin-vuetify"
const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  css: [resolve("./node_modules/vuetify/lib/styles/main.sass")], // works
  modules: [resolve("./node_modules/@pinia/nuxt/dist/module.mjs")], // works
  alias: {
    pinia: resolve("./node_modules/pinia"), // works
    vuetify: resolve("./node_modules/vuetify") // still doesn't work: Cannot start nuxt:  Cannot find module 'vuetify/package.json' in /other-layer when runing `yarn dev`
  }
})

package.json

  "dependencies": {
    "@pinia/nuxt": "^0.4.9",
    "pinia": "^2.0.35",
    "sass": "^1.62.1",
    "vite-plugin-vuetify": "^1.0.2",
    "vuetify": "^3.1.16"
  }

  "dependencies": {
    "@pinia/nuxt": "^0.4.9",
    "pinia": "^2.0.35",
    "sass": "^1.62.1",
    "vite-plugin-vuetify": "^1.0.2",
    "vuetify": "^3.1.16"
  }

/other-layer nuxt.config.ts

export default defineNuxtConfig({
  extends: ["../base-layer"]
})

export default defineNuxtConfig({
  extends: ["../base-layer"]
})

package.json

  "dependencies": {}

  "dependencies": {}

6 replies

Gaming

Programming