CODEWITHSUNDEEP
javascriptnuxt.jsnuxt3.js
Xanthous
Xanthous

Reputation: 632

Nuxt3 : Nuxt Image - Failed to resolve component: nuxt-img

I've been trying to use the Nuxt-image module on my Nuxt3 app but I can't get it to work. Because I get the following error : Failed to resolve component: nuxt-img

I followed the installation guide from the official doc : https://v1.image.nuxtjs.org/get-started

I ran npm install -D @nuxt/image-edge and now my package.json looks like this :

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "nuxt": "3.0.0",
    "nuxt-purgecss": "^2.0.0",
    "sass": "^1.56.1",
    "vite-plugin-vuetify": "^1.0.1",
    "vuetify": "^3.0.4"
  },
  "dependencies": {
    "@mdi/font": "^7.1.96",
    "@nuxtjs/apollo": "^5.0.0-alpha.4",
    "@pinia/nuxt": "^0.4.4",
    "@vueuse/nuxt": "^9.5.0",
    "lazysizes": "^5.3.2",
    "locomotive-scroll": "^4.1.4",
    "nuxt-lodash": "^2.4.1",
    "nuxt-swiper": "^0.1.6",
    "swiper": "^8.4.5",
    "vue-silentbox": "^3.0.2"
  }
}

Then I added Nuxt Image to my nuxt.config.ts:

modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/apollo',
    '@vueuse/nuxt',
    '@nuxt/image-edge',
    [
        '@pinia/nuxt',
        {
            autoImports: ['defineStore', 'acceptHMRUpdate'],
        }
    ],
    'nuxt-swiper',
    'nuxt-lodash'
],

And lastly I added the image config (I tried leaving it blank too) :

image: {
    dir: 'assets/images'
}

Did someone else encounter this error ? And I can I get it to work ?

Upvotes: 1

Views: 2311

Answers (2)

Bayu Setiawan
Bayu Setiawan

Reputation: 11

If you are using nuxt3, I recommend updating your Nuxt application to stable version 3.7 and using @nuxt/image@rc

follow this documentation nuxt-image for setup and installation

If you use a static image, make sure to put it in a public directory to ensure it works in production

Upvotes: 0

Xanthous
Xanthous

Reputation: 632

In case it might help someone else :

My nuxt version 3.0.0 was not compatible you need at least 3.1.0

Upvotes: 1

Related Questions