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 |
- 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
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
OptimizeImage(
:allowCrossorigin='true'
:alt='alt text'
:async='true'
:fit='true'
:[gtmAttribute]='gtm value'
:imgStyle='{}'
:loadMethod='true'
:src='osrc.png'
)
{
"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
}