Skip to content
This repository was archived by the owner on Jan 12, 2024. It is now read-only.

Commit 3fce692

Browse files
dbachkoAlan Shaw
dbachko
authored and
Alan Shaw
committed
docs: add Vue browser example (#2302)
* Adds Vue browser example * Removes pify; uses IPFS.create
1 parent 6936465 commit 3fce692

14 files changed

+263
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ Clone this repo to explore these tutorials on your local machine:
2626

2727
- [js-ipfs in the browser with Browserify](./browser-browserify)
2828
- [js-ipfs in the browser with Parcel.js](./browser-parceljs)
29+
- [js-ipfs in the browser with Vue](./browser-vue)
2930
- [js-ipfs in the browser with WebPack](./browser-webpack)
3031
- [js-ipfs in the browser with a `<script>` tag](./browser-script-tag)
3132
- [js-ipfs in electron](./run-in-electron)

‎browser-vue/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
/node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎browser-vue/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# IPFS Vue app
2+
3+
A minimal demonstration of how to use `js-ipfs` with `Vue`.
4+
5+
![screenshot of the js ipfs node id info](./src/assets/ipfs-vue-screenshot.png)
6+
7+
This project was bootstrapped with [Vue CLI](https://cli.vuejs.org/).
8+
9+
## Project setup
10+
11+
```bash
12+
npm install
13+
```
14+
15+
### Compiles and hot-reloads for development
16+
17+
```bash
18+
npm run serve
19+
```
20+
21+
### Compiles and minifies for production
22+
23+
```bash
24+
npm run build
25+
```
26+
27+
### Run your tests
28+
29+
```bash
30+
npm run test
31+
```
32+
33+
### Lints and fixes files
34+
35+
```bash
36+
npm run lint
37+
```
38+
39+
### Customize configuration
40+
41+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎browser-vue/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@vue/app'],
3+
};

‎browser-vue/package.json

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "browser-vue",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^2.6.5",
12+
"ipfs": "file:../../",
13+
"vue": "^2.6.10"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-plugin-babel": "^3.9.0",
17+
"@vue/cli-plugin-eslint": "^3.9.0",
18+
"@vue/cli-service": "^3.9.0",
19+
"babel-eslint": "^10.0.1",
20+
"eslint": "^5.16.0",
21+
"eslint-plugin-vue": "^5.0.0",
22+
"vue-template-compiler": "^2.6.10"
23+
},
24+
"eslintConfig": {
25+
"root": true,
26+
"env": {
27+
"node": true
28+
},
29+
"extends": [
30+
"plugin:vue/essential",
31+
"eslint:recommended"
32+
],
33+
"rules": {},
34+
"parserOptions": {
35+
"parser": "babel-eslint"
36+
}
37+
},
38+
"postcss": {
39+
"plugins": {
40+
"autoprefixer": {}
41+
}
42+
},
43+
"browserslist": [
44+
"> 1%",
45+
"last 2 versions"
46+
]
47+
}

‎browser-vue/public/favicon.ico

33.7 KB
Binary file not shown.

‎browser-vue/public/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8+
<title>IPFS Vue</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong
13+
>We're sorry but browser-vue doesn't work properly without JavaScript enabled. Please enable it to
14+
continue.</strong
15+
>
16+
</noscript>
17+
<div id="app"></div>
18+
<!-- built files will be auto injected -->
19+
</body>
20+
</html>

‎browser-vue/src/App.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div id="app">
3+
<ipfs-info />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import IpfsInfo from "./components/IpfsInfo.vue";
9+
10+
export default {
11+
name: "app",
12+
components: {
13+
IpfsInfo
14+
}
15+
};
16+
</script>
17+
18+
<style>
19+
body {
20+
margin: 0;
21+
}
22+
#app {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
height: 100vh;
27+
font-family: "Avenir", Helvetica, Arial, sans-serif;
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
text-align: center;
31+
}
32+
</style>

‎browser-vue/src/assets/ipfs-vue-screenshot.png

90 KB
Loading

‎browser-vue/src/assets/logo.svg

Lines changed: 20 additions & 0 deletions
Loading

‎browser-vue/src/components/IpfsInfo.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="ipfs-info">
3+
<img class="ipfs-logo" alt="IPFS logo" src="../assets/logo.svg" />
4+
<h1>{{ status }}</h1>
5+
<h2>ID: {{ id }}</h2>
6+
<h2>Agent version: {{ agentVersion }}</h2>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: "IpfsInfo",
13+
data: function() {
14+
return {
15+
status: "Connecting to IPFS...",
16+
id: "",
17+
agentVersion: ""
18+
};
19+
},
20+
mounted: function() {
21+
this.getIpfsNodeInfo();
22+
},
23+
methods: {
24+
async getIpfsNodeInfo() {
25+
try {
26+
// Await for ipfs node instance.
27+
const ipfs = await this.$ipfs;
28+
// Call ipfs `id` method.
29+
// Returns the identity of the Peer.
30+
const { agentVersion, id } = await ipfs.id();
31+
this.agentVersion = agentVersion;
32+
this.id = id;
33+
// Set successful status text.
34+
this.status = "Connected to IPFS =)";
35+
} catch (err) {
36+
// Set error status text.
37+
this.status = `Error: ${err}`;
38+
}
39+
}
40+
}
41+
};
42+
</script>
43+
44+
<!-- Add "scoped" attribute to limit CSS to this component only -->
45+
<style scoped>
46+
.ipfs-logo {
47+
height: 10rem;
48+
}
49+
</style>

‎browser-vue/src/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
import VueIpfs from './plugins/vue-ipfs';
4+
5+
// Load our IPFS plugin.
6+
Vue.use(VueIpfs);
7+
8+
Vue.config.productionTip = false;
9+
10+
new Vue({
11+
render: h => h(App),
12+
}).$mount('#app');

‎browser-vue/src/plugins/vue-ipfs.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import IPFS from 'ipfs'
2+
3+
const plugin = {
4+
install(Vue, opts = {}) {
5+
Vue.prototype.$ipfs = IPFS.create(opts)
6+
},
7+
}
8+
9+
// Auto-install
10+
if (typeof window !== 'undefined' && window.Vue) {
11+
window.Vue.use(plugin)
12+
}
13+
14+
export default plugin

‎browser-vue/vue.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
chainWebpack: config => config.resolve.symlinks(false),
3+
}

0 commit comments

Comments
 (0)