How to use the $img utility with script setup in Nuxt?

[leopoldkristjansson]

I am trying to generate a URL programmatically and I want to use the $img utility from Nuxt/Image.

I am using Cloudinary as a provider.

My nuxt.config.ts looks like this:

export default defineNuxtConfig({
  // Rest of my config
  image: {
    cloudinary: {
      baseURL: myCloudinaryBaseUrl,
    },
  }
})

How do I go about it? The docs currently say use: this.$img but that does not work obviously.

I am trying the following:

const nuxtApp = useNuxtApp()

const myImgUrl = nuxtApp.$img(myFileName, {
  width: 100,
})
console.log(myImgUrl)
// Logs: /_ipx/w_100/name-of-file.jpg

Also, the following message shows up in VS Code: 'nuxtApp.$img' is of type 'unknown'.

[leopoldkristjansson]

To answer my own question. I was reading the old docs (for Nuxt 2). These are the correct once: https://v1.image.nuxtjs.org/api/dollarimg

This works:

const $img = useImage()
const myImgUrl = $img(
  myFileName,
  {
    width: 100,
  },
  { provider: 'cloudinary' },
)
console.log(myImgUrl)

However, myImgUrl seems to be of type any.