https://github.com/bkwld/nuxt-remote-asset-cache
Store remote assets in the local build during Nuxt generation
https://github.com/bkwld/nuxt-remote-asset-cache
Last synced: over 1 year ago
JSON representation
Store remote assets in the local build during Nuxt generation
- Host: GitHub
- URL: https://github.com/bkwld/nuxt-remote-asset-cache
- Owner: BKWLD
- License: mit
- Created: 2019-10-16T17:25:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-18T15:44:50.000Z (over 2 years ago)
- Last Synced: 2025-02-26T15:52:03.857Z (over 1 year ago)
- Language: CoffeeScript
- Size: 139 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-remote-asset-cache
This stores remote assets, like images, that are referenced in the `asyncData` of a Nuxt page in some local directory that isn't destroyed between successive `generate` calls. This was written, in particular, for Netlify and it's `NETLIFY_CACHE_DIR`.
## Example
#### nuxt.config.js
```js
{
modules: [
'nuxt-remote-asset-cache',
]
/**
* This would download anything in the data returned from asyncData with a
* URL like http://cms.hostname.com/images/file.jpg to the directory path
* from $NETLIFY_CACHE_DIR. In addition, they will be published on every
* generate into /dist/images/file.jpg (for example)
*/
remoteAssetCache: {
cacheDir: process.env.NETLIFY_CACHE_DIR,
assetRegex: [
{
pattern: /https?:\/\/cms\.hostname\.com\/images\/([\w\d-.\/]+)/gi,
replacement: {
storagePath: "/images/$1",
publicUrl: "#{process.env.URL}/images/$1",
autoLowercase: true,
}
}
]
}
}
```
#### pages/home.vue
```html
export default {
asyncData ({$cacheAssets}) {
// Fetch some data from somewhere
const data = { marquee: {
headline: 'Hi',
background: 'http://cms.hostname.com/images/file.jpg'
}}
return $cacheAssets(data)
}
}
```