Nuxt-seo-image NPM

SEO Optimized image

commands

max flexibility

command	description
generate:image-vue	make a copy of SeoImage to your repository

command	description
image:all	automated command to run all steps accordingly
image:generate	- generate webp image
image:move	copy image to serve directory
image:resize	resize image to multiple smaller sizes
image:webp	generate webp image

Max flexibility

to allow fully tweaking on the nuxt component yarn seo-generate generate:image-vue
this command will generate a few files
- components/optimize/image.vue
- nuxt-seo-image/
find all // custom -> remove it and remove the line below them

Configs

file name: seo-img.config.json | seo-img.config.<NODE_ENV>.json

useNuxtDefault?: boolean
imageBase?: string
gtmAttribute?: string
sizes?: Array<{ imgWidth: number screenWidth: number }>
imgDir?: string
imgDest?: string
cacheDir?: string
webp?: boolean
resize?: boolean
readFromSource?: boolean
populateSource?: boolean

Vue Tag

OptimizeImage(
  :allowCrossorigin='true'
  :alt='alt text'
  :async='true'
  :fit='true'
  :[gtmAttribute]='gtm value'
  :imgStyle='{}'
  :loadMethod='true'
  :src='osrc.png'
)

DEfault nuxtf setup

{ 
  "gtmAttribute": "gtm-label",
  "imgDir": "assets/images",
  "imgDest": "images",
  "cacheDir": ".cache",
  "imageBase": "images",
  "sizes": [
    { "imgWidth": 380, "screenWidth": 460 },
    { "imgWidth": 720, "screenWidth": 700 },
    { "imgWidth": 1000, "screenWidth": 950 }
  ],
  "webp": false,
  "resize": false,
  "populateSource": false,
  "readFromSource": true,
  "useNuxtDefault": true
}