Nuxt-module-ipfs NPM

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

Nuxt NuxtJS IPFS Interplanetary File System

3 years ago

3 years ago

3 years ago