@itplusx/nuxt-thumbor v0.1.1
@itplusx/nuxt-thumbor
Thumbor module for NuxtJS.
Based on Thumbor TS.
Setup
- Add
@itplusx/nuxt-thumbor
dependency to your project:
yarn add @itplusx/nuxt-thumbor
# or
npm i @itplusx/nuxt-thumbor
- Add
@itplusx/nuxt-thumbor
to the modules section ofnuxt.config.js
:
export default {
modules: [
[
'@itplusx/nuxt-thumbor',
{
// Options
}
]
]
}
Or using top level options
export default {
modules: [
'@itplusx/nuxt-thumbor'
],
thumbor: {
// Options
}
}
Options
serverUrl
- Type:
String
- Default:
http://localhost:8888
Url to the Thumbor server.
The serverUrl
can also simply be overwritten with the ENV variable THUMBOR_SERVER_URL
.
securityKey
(CURRENTLY NOT IN USE)
- Type:
String
Security Key to prevent URL Tempering.
If no securityKey
is set, the urls will be created with /unsure/
instead.
The securityKey
can also simply be overwritten with the ENV variable THUMBOR_SECURITY_KEY
.
:warning: At the moment there is no real secure way to generate secure urls, because the security key is being exposed to the frontend. Help is appreciated. We have decided not to use it to prevent someone to expose the key.
Setting up a proxy
If you want to hide the thumbor server you could use @nuxtjs/proxy
.
.env
THUMBOR_SERVER_URL=/_image
nuxt.config.js
{
proxy: {
'/_image/': {
target: 'https://thumbor-server.tld',
pathRewrite: {'^/_image/': ''}
}
}
}
Usage
$thumbor
This module globally injects $thumbor
instance, meaning that you can access it anywhere using this.$thumbor
.
For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$thumbor
.
Under the hood Thumbor TS is being used. Check the API to get an overview
of the provided functionalities. $thumbor
directly provides the same methods.
<template>
<img
:src="$thumbor.setPath('https://domain.tld/path/to/image.jpg').resize(300, 0).grayscale().buildUrl()"
/>
</template>
4 years ago