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,
},
},
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/`,
},
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?