A Nuxt module that enables nuxt routing for both the intended path and IPFS gateway URLs, which include a CID (hash) of the asset.
Enabling this plugin for Nuxt in static mode will allow resources, including pages, to be accessible via 3 different route structures:
foo.com/gateway.ipfs.io/ipfs/Qma....AbFd/ipfs.io/ipns/foo.com/
Subsequently, resources and other pages automatically use paths relative to those bases:
foo.com/bar.pnggateway.ipfs.io/ipfs/Qma....AbFd/bar.pngipfs.io/ipns/foo.com/bar.png
or
foo.com/style.cssgateway.ipfs.io/ipfs/Qma....AbFd/style.cssipfs.io/ipns/foo.com/style.css
npm package coming soon. Manual installation required for now.
- Download this repo, extract it and put the resulting folder into your
modulesdirectory in your Nuxt project - Add
target: 'static'androuter.baseto yournuxt.config.js - Add the module folder name to the
modulesarray innuxt.config.js
nuxt.config.js
export default {
target: 'static',
modules: [
'~/modules/nuxt-module-ipfs'
],
router: {
base: process.env.NODE_ENV === 'development' ? '/' : '/ipfs/hash/'
}
}Support for the assets directory potentially coming in the future
All image assets must be placed in the static directory, not the assets directory and must be wrapped using the included $relativity() (including a starting forward slash) global method as outlined below:
component.vue
<template>
<img :src="$relativity('/images/duck.jpg')" />
</template>To be added
Additionally, it may be useful in the future to add a canonicalization option, to semantically declare one page as a duplicate of the other, and direct third party entities like bots to the correct resource. This would be accomplished by injecting a tag into <head> of the version that is considered secondary, which would look like
<link rel="canonical" href="foo.com/bar" />Since IPFS gateway URLs were an older (and by some standards legacy) implementation, this tag would typically be added to the IPFS Gateway URLs only.
- Add checker for
target: static - Construct and inject
rel="canonical"tag - Make the favicon path relative and working on all URL structures
- Make
200.htmlpath relative