konsav Posts - Answer Overflow

konsav

•Created by konsav on 2/19/2025 in #❓・help

Switching from vue-i18n to @nuxtjs/i18n — Folder Structure & Dynamic Imports Issue

Hey everyone! I was using vue-i18n ("vue-i18n": "^9.2.2") with this setup and now I tried switching to @nuxtjs/i18n (version 9.1.1). Previous setup with vue-i18n: plugins/i18n.js

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

import { createI18n } from "vue-i18n";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "el",
    fallbackLocale: "el",
  });

  vueApp.use(i18n);
});

The problem: I have a lot of language files organized by page and component:

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

lang\GR\Common\Footer.json  
lang\EN\Common\Footer.json   
lang\GR\HomePage\test.json  
lang\EN\HomePage\test.json

On each page, I import the JSON files with require() based on the current locale. Now, with @nuxtjs/i18n, I’m struggling to find the best way to keep this folder structure and dynamically load the translations. Do you have any idea about that? Thank you

14 replies

NNuxt

•Created by konsav on 2/6/2025 in #❓・help

NuxtImg from assets folder

Hey everyone! I recently made two changes to my Nuxt 3 project: - Switched from @nuxt/image-edge to @nuxt/image - Moved from Webpack to Vite Before switching to Vite and @nuxt/image, I had the following configuration in nuxt.config.ts, and everything was working fine:

 build: {
    extend(config: any) {
      config.output.publicPath = ${cdnUrl}xonuxt/_nuxt/;
    },
  },

  builder: "webpack",
  modules: ['@nuxt/image-edge'],
  image: {
    domains: [${cdnMinUrl}],
    provider: "ipx",
    ipx: {
      baseURL: ${baseUrl}_ipx,
    },
  },

 build: {
    extend(config: any) {
      config.output.publicPath = ${cdnUrl}xonuxt/_nuxt/;
    },
  },

  builder: "webpack",
  modules: ['@nuxt/image-edge'],
  image: {
    domains: [${cdnMinUrl}],
    provider: "ipx",
    ipx: {
      baseURL: ${baseUrl}_ipx,
    },
  },

After the changes, my new nuxt.config.ts looks like this:

  modules: ['@nuxt/image'],
  image: {
    provider: "ipx",
    domains: [cdnMinUrl],
    ipx: {
      baseURL: `${baseUrl}_ipx`,
    },
  },
  vite: {
    base: `${cdnUrl}xonuxt/_nuxt/`,
  },

  modules: ['@nuxt/image'],
  image: {
    provider: "ipx",
    domains: [cdnMinUrl],
    ipx: {
      baseURL: `${baseUrl}_ipx`,
    },
  },
  vite: {
    base: `${cdnUrl}xonuxt/_nuxt/`,
  },

However, after switching to Vite and @nuxt/image, my images are not loading properly. I’m not sure if I need to configure @nuxt/image differently or if there's a conflict with Vite’s handling of base. Has anyone faced a similar issue or knows what changes I should make to my nuxt.config.ts to make it work with Vite?

16 replies

NNuxt

•Created by konsav on 7/9/2024 in #❓・help

Issue with Upgrading @nuxt/image Module in Nuxt 3

Hello everyone, I'm encountering an issue while upgrading from @nuxt/image-edge to the latest stable @nuxt/image in my Nuxt 3 project. My current setup includes: • Nuxt version: "^3.1.1" • Vue version: "^3.2.45" • @nuxt/image version: "latest" After updating the module, I receive the following error during the build: Module not found: Error: Can't resolve 'C:/.../node_modules/@nuxt/image/dist/runtime/composables' in 'node_modules@nuxt\image\dist\runtime\components' Did you mean 'composables.mjs'? BREAKING CHANGE: The request 'C:/.../node_modules/@nuxt/image/dist/runtime/composables' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. Do you have any idea for the error?

3 replies

NNuxt

•Created by konsav on 4/22/2024 in #❓・help

middleware/redirect.global.js

My project is in Nuxt3. I create a middleware in order to redirect when a user go to a specific route. And the redirect url is from an APi call. My problem is that API call become twice and i have this error on terminal [unhandledRejection] Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

16 replies

NNuxt

•Created by konsav on 3/4/2024 in #❓・help

Cache-Control: max-age=604800, public.

I have my project in "vue": "^3.2.45" and "nuxt": "^3.1.1". In one page of my project appear on network in Response headers Cache-Control: max-age=604800, public and i have problems to continue. I haven't set up something about caching. Do you have any idea about that?

4 replies

NNuxt

•Created by konsav on 5/17/2023 in #❓・help

SyntaxError: Unexpected token '?', SyntaxError: Unexpected token '.'

Hey everyone! On iPhone devices with Safari version 13 and below, this error appears in the console and the page does not display correctly. Could you help me why this is happening?

16 replies

NNuxt

•Created by konsav on 3/24/2023 in #❓・help

Image-edge doesn't work the format="webp"

Hello! I do migration from nuxt2 to nuxt3. I use for images @nuxt/image-edge package. But it doesn't work as i want. It dosen't convert the images to webp. Do you have any idea?

11 replies

NNuxt

•Created by konsav on 3/13/2023 in #❓・help

Nuxt 3 prefetch all chunks

Hi i have a problem with production build. I have 2 layouts and couple of pages for each layouts. But when I do nuxi build and nuxi start every page loads every styles and assets that are imported by all of the pages. How can i disabled prefetch for all of chunks?

3 replies

NNuxt

•Created by konsav on 2/9/2023 in #❓・help

nuxt/image-edge

1 replies

NNuxt

•Created by konsav on 1/30/2023 in #❓・help

Disable auto imports

Hello everyone! I have a problem with the auto import into Nuxt3. I set it in nuxt.config.ts as autoImport: false(https://nuxt.com/docs/guide/concepts/auto-imports#disable-auto-imports) and on network bring all the .js files. Can anyone help me? Thanks in advance!

1 replies

Gaming

Programming