@agency-undone/nuxt-module-ipfs

v1.0.2-alpha.5

Published

3 years ago

A Nuxt module that enables nuxt routing for both the intended path and IPFS gateway URLs, which include a CID (hash)

Downloads

106

0High
0Medium
0Low

benmunoz

naurasj

orvn

Nuxt NuxtJS IPFS Interplanetary File System

Nuxt Module for IPFS Gateway Routing

Overview

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.png
gateway.ipfs.io/ipfs/Qma....AbFd/bar.png
ipfs.io/ipns/foo.com/bar.png

foo.com/style.css
gateway.ipfs.io/ipfs/Qma....AbFd/style.css
ipfs.io/ipns/foo.com/style.css

Installation

npm package coming soon. Manual installation required for now.

Download this repo, extract it and put the resulting folder into your modules directory in your Nuxt project
Add target: 'static' and router.base to your nuxt.config.js
Add the module folder name to the modules array in nuxt.config.js

nuxt.config.js

export default {
  target: 'static',
  modules: [
    '~/modules/nuxt-module-ipfs'
  ],
  router: {
    base: process.env.NODE_ENV === 'development' ? '/' : '/ipfs/hash/'
  }
}

Usage

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>

Additional Cases

To be added

Canonicalization and SEO

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.

Roadmap

[ ] Add checker for target: static
[ ] Construct and inject rel="canonical" tag
[ ] Make the favicon path relative and working on all URL structures
[ ] Make 200.html path relative

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme