Mark Brouch Posts - Answer Overflow

Mark Brouch

•Created by Mark Brouch on 6/11/2024 in #❓・help

Nuxt 3.12.1 - Invalid link type image/x-icon in nuxt.config.ts app.head.link

After upgrading to Nuxt 3.12.1 from 3.11.1, one of my app.head.link items has an invalid type:

{
  app: {
    head: {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',  // Error TS2322
          href: 'https://example.com/favicon.ico',
        },
      ]
    }
  }
}

{
  app: {
    head: {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',  // Error TS2322
          href: 'https://example.com/favicon.ico',
        },
      ]
    }
  }
}

I believe this stems from the use of zhead, which attempts an exhaustive list of valid MIME types as described in this issue: https://github.com/harlan-zw/zhead/issues/23. Given the opportunity for many unsupported MIME types, I suggest that the link type property not attempt an exhaustive list of MIME types.

3 replies

NNuxt

•Created by Mark Brouch on 5/10/2024 in #❓・help

How to configure multiple providers of same type in nuxt-image

I have the need to access several different Cloudinary clouds (with different baseURLs) from my Nuxt app using the Image module. I can't seem to figure out a way to configure multiple different Cloudinary providers in nuxt.config.ts however. Am I missing an obvious config method for doing this, or is there some other workaround I could try? For example, say I have 2 separate Cloudinary clouds: https://cdn1.example.com/images/upload and https://cdn2.example.com/images/upload. In nuxt.config.ts, I can configure one of them like:

{
  image: {
    cloudinary: {
      baseURL: 'https://cdn1.example.com/images/upload'
    }
  }
}

{
  image: {
    cloudinary: {
      baseURL: 'https://cdn1.example.com/images/upload'
    }
  }
}

but there is no way to also have cdn2.example.com configured. Even with a default cloudinary url (not using cdn), there's no way to configure multiple clouds, for example: - https://res.cloudinary.com/my-cloud-1/images/upload - https://res.cloudinary.com/my-cloud-2/images/upload If you try nuxt.config.ts:

{
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com'
    }
  }
}

{
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com'
    }
  }
}

and then try setting your source in an image to the correct cloud:

<NuxtImg src="my-cloud-1/images/upload/path/to/image.jpg" />

<NuxtImg src="my-cloud-1/images/upload/path/to/image.jpg" />

then transformations will not work because they are appended after the baseURL and need to come after the <cloud-name>/images/upload instead.

2 replies

NNuxt

•Created by Mark Brouch on 4/20/2024 in #❓・help

Override eslint flat config issue

Not sure if this is a bug or if I'm doing it wrong since I'm new to eslint 9.0 flat configs, but... I'm using the new nuxt eslint config (https://eslint.nuxt.com/) and I'm trying to override the no-unused-vars rule in my eslint.config.mjs file like this:

withNuxt().override('nuxt/javascript', {
  rules: {
    'no-unused-vars': [
      'error',
      { args: 'after-used', ignoreRestSiblings: true, caughtErrors: 'none' },
    ],
  },
})

withNuxt().override('nuxt/javascript', {
  rules: {
    'no-unused-vars': [
      'error',
      { args: 'after-used', ignoreRestSiblings: true, caughtErrors: 'none' },
    ],
  },
})

However, when I run eslint . on my project I get an error saying: 'Error: ESLintFlatConfigUtils: Failed to locate config with name "nuxt/javascript"'. I can fix this problem by changing the override name to @eslint/js/recommended, but this causes nuxt dev tools to show an error: 'Error: ESLintFlatConfigUtils: Failed to locate config with name "@eslint/js/recommended"'. It seems like dev tools and eslint are opposed with the names available, possibly due to some kind of aliasing under the hood? For reference, these are the available names in nuxt dev tools:

Available names are: nuxt/javascript, nuxt/typescript/setup, nuxt/typescript/rules, nuxt/vue/setup, nuxt/vue/rules, nuxt/import/rules, nuxt/configs, nuxt/vue/single-root, nuxt/rules, nuxt/disables/routes, nuxt/import-globals

Available names are: nuxt/javascript, nuxt/typescript/setup, nuxt/typescript/rules, nuxt/vue/setup, nuxt/vue/rules, nuxt/import/rules, nuxt/configs, nuxt/vue/single-root, nuxt/rules, nuxt/disables/routes, nuxt/import-globals

And these are the available names to eslint from the CLI:

Available names are: @eslint/js/recommended, nuxt/typescript/setup, nuxt/typescript/rules, nuxt/vue/setup, nuxt/vue/rules, nuxt/import/rules, nuxt/configs, nuxt/vue/single-root, nuxt/rules, nuxt/disables/routes, nuxt/import-globals

Available names are: @eslint/js/recommended, nuxt/typescript/setup, nuxt/typescript/rules, nuxt/vue/setup, nuxt/vue/rules, nuxt/import/rules, nuxt/configs, nuxt/vue/single-root, nuxt/rules, nuxt/disables/routes, nuxt/import-globals

2 replies

NNuxt

•Created by Mark Brouch on 2/14/2024 in #❓・help

How do you add a directory of files to publicAssets at build time?

I'm trying to add a directory of files (wasm and tflite models) to my publicAssets directory at build time so that my application can access these files by url during runtime. It seems that the way to do this would be via the Nuxt config:

export default defineNuxtConfig({
// ...
nitro: {
  publicAssets: [
    {
      baseURL: 'my_assets',
      dir: 'node_modules/path/to/the/assets
    }
  ]
}
})

export default defineNuxtConfig({
// ...
nitro: {
  publicAssets: [
    {
      baseURL: 'my_assets',
      dir: 'node_modules/path/to/the/assets
    }
  ]
}
})

However, with this config I don't see the assets in my .output/public dir after building either dev or production. Is this a bug, or is there a different way to acheive this?

12 replies

Gaming

Programming