fix: rename nuxt-image to nuxt-img

README.md

@@ -11,7 +11,7 @@
 > Optimised images for [NuxtJS](https://nuxtjs.org), with progressive processing, lazy-loading, real-time resizes and providers ([IPX](https://github.com/nuxt-contrib/ipx), [Cloudinary](https://cloudinary.com), [TwicPics](https://www.twicpics.com/), etc).
 
 ```html
-<NuxtImage src="/image.png" width="500" height="200" />
+<NuxtImg src="/image.png" width="500" height="200" />
 ```
 
 :warning: This module is still a work in progress, please be careful.

docs/content/en/custom-provider.md

@@ -123,11 +123,11 @@ export default {
 }
 ```
 
-### Use provider in `nuxt-image`
-To use your provider, write your provider's name before the src. Read [provider doc](/nuxt-image#provider)
+### Use provider in `nuxt-img`
+To use your provider, write your provider's name before the src. Read [provider doc](/nuxt-img#provider)
 
 ```vue{}[index.vue]
 <template>
-  <nuxt-image src="custom:/main.png" />
+  <nuxt-img src="custom:/main.png" />
 </template>
 ```

docs/content/en/examples/random-provider.md

@@ -58,15 +58,15 @@ Let's use our random provider in our Nuxt application:
 
   ```vue{}[~/pages/index.js]
   <template>
-    <nuxt-image src="random:/" width="600" height="400" />
+    <nuxt-img src="random:/" width="600" height="400" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="random:/" width="600" height="400"></nuxt-image>
+    <nuxt-img src="random:/" width="600" height="400"></nuxt-img>
   </div>
 
   </code-block>

docs/content/en/how-it-works.md

@@ -7,10 +7,10 @@ category: Guide
 
 ## Components behavior
 The behavior of the Image module is different in the project based on deployment targets.  
-Note that the behavior of `nuxt-picture` is similar to `nuxt-image`.
+Note that the behavior of `nuxt-picture` is similar to `nuxt-img`.
 
 ### Server Side Rendering / SSR
-When server rendering is enabled on your project, the Nuxt image automatically detects the image's file size and aspect ratio on the server-side. Using this information `nuxt-image` will:
+When server rendering is enabled on your project, the Nuxt image automatically detects the image's file size and aspect ratio on the server-side. Using this information `nuxt-img` will:
 
 - Automatically calculates image size on the page and prevent [Cumulative Layout Shift](https://web.dev/cls/)
 - Disable placeholder image If the file size of the original image is smaller than the threshold.
@@ -20,12 +20,12 @@ Note: This behavior is dependent on the provider you are using for the image, If
 </alert>
 
 ### Client Side Rendering / no SSR
-Things are different when SSR is disabled. Nuxt Image could not calculate metadata of the image before the rendering process, therefore if you do specify a size for `nuxt-image`, your page layout will face [Cumulative Layout Shift](https://web.dev/cls/).  
-If your page does not render on the server-side, it is highly recommended to specify a size for the `nuxt-image` to prevent cumulative layout shifting.
+Things are different when SSR is disabled. Nuxt Image could not calculate metadata of the image before the rendering process, therefore if you do specify a size for `nuxt-img`, your page layout will face [Cumulative Layout Shift](https://web.dev/cls/).  
+If your page does not render on the server-side, it is highly recommended to specify a size for the `nuxt-img` to prevent cumulative layout shifting.
 
 There are different ways to specify the size of the image:
 - Use CSS styling to style the image size.
-- Specify `width` and `height` props for the `nuxt-image` component, This way `nuxt-image` will calculate the aspect ratio of the image and preserve the size of the image.
+- Specify `width` and `height` props for the `nuxt-img` component, This way `nuxt-img` will calculate the aspect ratio of the image and preserve the size of the image.
 
 ### Full Static
 If you use Nuxt to generate full static websites, the Image module will optimize your image and generates images statically. On the generate phase Image module will: 
@@ -34,5 +34,5 @@ If you use Nuxt to generate full static websites, the Image module will optimize
 - Generates resized & optimized version of the image based on user preferences.
 - Assign a small random name for every variation of the image and store it in the output directory.
 
-The behavior of `nuxt-image` for the generated images is similar to SSR mode because the metadata of the image was calculated on the generate phase and stored in the payload of the page.  
-On the other hand, the behavior of `nuxt-image` for the non-generated images will be the same as [Client side rendering](/how-it-works#server-side-rendering--ssr).
+The behavior of `nuxt-img` for the generated images is similar to SSR mode because the metadata of the image was calculated on the generate phase and stored in the payload of the page.  
+On the other hand, the behavior of `nuxt-img` for the non-generated images will be the same as [Client side rendering](/how-it-works#server-side-rendering--ssr).

docs/content/en/index.md

@@ -9,8 +9,8 @@ features:
   - CDN Support
 ---
 
-<nuxt-image src="/preview.png" :placeholder="true" class="light-img"></nuxt-image>
-<nuxt-image src="/preview-dark.png" :placeholder="true" class="dark-img"></nuxt-image>
+<nuxt-img src="/preview.png" :placeholder="true" class="light-img"></nuxt-img>
+<nuxt-img src="/preview-dark.png" :placeholder="true" class="dark-img"></nuxt-img>
 
 Optimised images for [NuxtJS](https://nuxtjs.org).
 

docs/content/en/nuxt-image.md

@@ -11,24 +11,24 @@ Path to image file. `src` sould be in form of absolute path and starts with `/`.
 
 ```vue
 <template>
-  <nuxt-image :src="src" ... />
+  <nuxt-img :src="src" ... />
 </template>
 ```
 
-The `src` has other capabilities in `nuxt-image`, you can provide provider and preset for the image right inside the `src` property.
+The `src` has other capabilities in `nuxt-img`, you can provide provider and preset for the image right inside the `src` property.
 
 ### Provider
 
 Nuxt image module will allow you to modify and serve your images using cloud services like cloudinary. In order to use a provider you should:
 1. Define provider and its option in `nuxt.config`.
-2. Specify providers name in `nuxt-image` component
+2. Specify providers name in `nuxt-img` component
 
 <code-group>
   <code-block label="index.vue" active>
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
+    <nuxt-img src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -50,7 +50,7 @@ Nuxt image module will allow you to modify and serve your images using cloud ser
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-image>
+    <nuxt-img src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-img>
   </div>
 
   </code-block>
@@ -62,14 +62,14 @@ Nuxt image module will allow you to modify and serve your images using cloud ser
 
 ### Preset
 
-Presets are predefined sets of image modifiers that can be used create unified form of images in your projects. You can write your presets inside `nuxt.config` and then use them in `nuxt-image`.
+Presets are predefined sets of image modifiers that can be used create unified form of images in your projects. You can write your presets inside `nuxt.config` and then use them in `nuxt-img`.
 
 <code-group>
   <code-block label="index.vue" active>
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="50" height="50" />
+    <nuxt-img src="+jpg-cover:/nuxt-icon.png" width="50" height="50" />
   </template>
   ```
 
@@ -97,7 +97,7 @@ Presets are predefined sets of image modifiers that can be used create unified f
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="+jpg-cover:/nuxt-icon.png" width="150" height="150"></nuxt-image>
+    <nuxt-img src="+jpg-cover:/nuxt-icon.png" width="150" height="150"></nuxt-img>
   </div>
 
   </code-block>
@@ -114,7 +114,7 @@ As you may notice providers and presets are different in their usage, and it is
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
+    <nuxt-img src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -147,7 +147,7 @@ As you may notice providers and presets are different in their usage, and it is
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
+    <nuxt-img src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </div>
 
   </code-block>
@@ -158,14 +158,14 @@ Genererate `<noscript>` tag for browsers that aren’t running javascript.
 
 ## `lazy`
 
-By default `nuxt-image` lazy load all images to reduce initial requests and page size. Using `lazy` prop you can disable lazy loading.
+By default `nuxt-img` lazy load all images to reduce initial requests and page size. Using `lazy` prop you can disable lazy loading.
 
 <code-group>
   <code-block label="index.vue" active>
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image :lazy="false" src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
+    <nuxt-img :lazy="false" src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
@@ -198,7 +198,7 @@ By default `nuxt-image` lazy load all images to reduce initial requests and page
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image lazy="false" src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" />
+    <nuxt-img lazy="false" src="cloudinary+jpg-cover:/remote/nuxt-org/blog/going-full-static/main.png" />
   </div>
 
   </code-block>
@@ -207,7 +207,7 @@ By default `nuxt-image` lazy load all images to reduce initial requests and page
 
 ## `placeholder`
 
-The placeholder is a small, low quality image that will show while the original image is loading. You could provide your own placeholder or let `nuxt-image` generate it for you.  
+The placeholder is a small, low quality image that will show while the original image is loading. You could provide your own placeholder or let `nuxt-img` generate it for you.  
 If you set `placeholder` to `true`, module creates a small placeholder for you. You can set your custom placeholder in this prop.
 
 
@@ -216,22 +216,22 @@ If you set `placeholder` to `true`, module creates a small placeholder for you.
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image :placeholder="true" src="/nuxt-icon.png" />
+    <nuxt-img :placeholder="true" src="/nuxt-icon.png" />
   </template>
   ```
   </code-block>
   <code-block label="Custom Placeholder">
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image :placeholder="/icon.png" src="/nuxt-icon.png" />
+    <nuxt-img :placeholder="/icon.png" src="/nuxt-icon.png" />
   </template>
   ```
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image placeholder="/icon.png" src="/nuxt-icon.png"></nuxt-image>
+    <nuxt-img placeholder="/icon.png" src="/nuxt-icon.png"></nuxt-img>
   </div>
 
   </code-block>
@@ -240,7 +240,7 @@ If you set `placeholder` to `true`, module creates a small placeholder for you.
 ## `sizes`
 
 The `sizes` attribute specifies the URL of the image to use in different situations. With `sizes`, the browser does the work of figuring out which image is best to load and render.  
-In `nuxt-image` you can simply provide various sizes and width breakpoints to generate `srcset`. Resized images are automatically created from the image `src`.
+In `nuxt-img` you can simply provide various sizes and width breakpoints to generate `srcset`. Resized images are automatically created from the image `src`.
 
 A set is consists of `width` and `breakpoint` or `media`: 
 - `width`: Width of generated image for this set
@@ -254,7 +254,7 @@ I this case you should create a comma separated list of sizes and breakpoints. S
 
 ```vue{}[index.vue]
 <template>
-  <nuxt-image sizes="300,300:600,600:900" ... />
+  <nuxt-img sizes="300,300:600,600:900" ... />
   <!--               |   |   |   |   | -->
   <!--------- width -^   |   |   |   | -->
   <!--                   |   |   |   | -->
@@ -271,7 +271,7 @@ Using array will help you to create custom media queries of different sizes and
 
 ```vue{}[index.vue]
 <template>
-  <nuxt-image :sizes="sizes" ... />
+  <nuxt-img :sizes="sizes" ... />
 </template>
 
 <script>
@@ -299,7 +299,7 @@ export default {
 
 ## `responsive`
 
-Using this prop `NuxtImage` will generate multiple sizes for the image based on the list of sizes that define the module options. see [`sizes` option](/options#sizes)  
+Using this prop `NuxtImg` will generate multiple sizes for the image based on the list of sizes that define the module options. see [`sizes` option](/options#sizes)  
 
 
 ## `alt`
@@ -312,7 +312,7 @@ In case you want to serve images in specific format, use this prop.
 
 ```vue{}[index.vue]
 <template>
-  <nuxt-image format="webp" src="/nuxt-icon.png" ... />
+  <nuxt-img format="webp" src="/nuxt-icon.png" ... />
 </template>
 ```
 
@@ -333,15 +333,15 @@ There are five standard values you can use with this property.
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image fit="cover" src="/nuxt-icon.png" width="200" height="100" />
+    <nuxt-img fit="cover" src="/nuxt-icon.png" width="200" height="100" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-  <nuxt-image fit="cover" src="/nuxt-icon.png" width="200" height="100" />
+  <nuxt-img fit="cover" src="/nuxt-icon.png" width="200" height="100" />
   </div>
 
   </code-block>
@@ -356,7 +356,7 @@ In addition of standard operation, every provider can have their own operation.
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image
+    <nuxt-img
       src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png"
       width="300" 
       height="169"
@@ -380,7 +380,7 @@ In addition of standard operation, every provider can have their own operation.
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image
+    <nuxt-img
       width="300" 
       height="169"
       src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" :operations="{r: '0:100'}"

docs/content/en/nuxt-picture.md

@@ -7,7 +7,7 @@ category: Componets
 
 If you want to use modern and optimized formats like `webp` or `avif` and support browsers like `IE` or `Safari` you should use `nuxt-picture` component. `nuxt-picture` component is based on HTML `<picture>` tag, this component is designed to support modern formats and improve browser compatibility at the same time.
 
-The usage of `nuxt-picture` is same as `nuxt-image`, with a little differences:
+The usage of `nuxt-picture` is same as `nuxt-img`, with a little differences:
 
 - When you use modern formats like `webp` in the component, a fallback image with `jpeg` format will be generated and used as a fallback image for old browsers.
 

docs/content/en/options.md

@@ -42,23 +42,23 @@ Here is a sample to use `cloudinary`:
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
+    <nuxt-img src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-image>
+    <nuxt-img src="cloudinary:/remote/nuxt-org/blog/going-full-static/main.png" width="300" height="169"></nuxt-img>
   </div>
 
   </code-block>
 </code-group>
 
 <!-- writing custom providers -->
 See:
-- [How to use provider](/nuxt-image#provider)
+- [How to use provider](/nuxt-img#provider)
 - [List of internal providers](/providers)
 - [Create custom provider](/custom-provider)
 
@@ -90,22 +90,22 @@ Presets are collections of pre-defined configurations for your projects. Presets
 
   ```vue{}[index.vue]
   <template>
-    <nuxt-image legacy src="+avatar:/nuxt-icon.png" />
+    <nuxt-img legacy src="+avatar:/nuxt-icon.png" />
   </template>
   ```
 
   </code-block>
   <code-block label="Preview">
 
   <div class="text-center p-4 bg-gray-800 rounded-b-md">
-    <nuxt-image legacy src="+avatar:/nuxt-icon.png"></nuxt-image>
+    <nuxt-img legacy src="+avatar:/nuxt-icon.png"></nuxt-img>
   </div>
 
   </code-block>
 </code-group>
 
 See:
-- [How to use presets](/nuxt-image#preset)
+- [How to use presets](/nuxt-img#preset)
 
 ## `provider`
 
@@ -144,7 +144,7 @@ export default {
       /**
        * Cache directory for optimized images
        **/
-      cacheDir: '~~/node_modules/.cache/nuxt-image',
+      cacheDir: '~~/node_modules/.cache/nuxt-img',
       /**
        * Enable/Disable cache cleaning cron job
        **/

docs/content/en/setup.md

@@ -43,7 +43,7 @@ export default {
 
 That's it ✨!
 
-Now you can start using `<nuxt-image>` components in your project.
+Now you can start using `<nuxt-img>` components in your project.
 
 ## Configure