Skip to content

Commit 476c77b

Browse files
johman10gregberge
johman10
authored and
gregberge
committed
docs(examples): add Vue.js example (#2)
1 parent 491bcd1 commit 476c77b

File tree

11 files changed

+8616
-0
lines changed

11 files changed

+8616
-0
lines changed

‎examples/vue/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist/
2+
.cache/
3+
.out/

‎examples/vue/.storybook/addons.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-actions/register'
2+
import '@storybook/addon-links/register'

‎examples/vue/.storybook/config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@storybook/vue'
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context('../stories', true, /.stories.js$/)
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename))
7+
}
8+
9+
configure(loadStories, module)

‎examples/vue/App.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template lang="html">
2+
<div class="apollo">
3+
<div v-if="$apollo.loading">Loading...</div>
4+
<div v-else-if="$apollo.error">Error :(</div>
5+
<RateCard v-else v-for="rate in rates" :key="rate.currency" :rate="rate" />
6+
</div>
7+
</template>
8+
9+
<script>
10+
import RateCard from './RateCard';
11+
import gql from 'graphql-tag';
12+
13+
export default {
14+
components: {
15+
RateCard
16+
},
17+
18+
apollo: {
19+
rates: gql`{
20+
rates(currency: "USD") {
21+
${RateCard.fragments.rate}
22+
}
23+
}`,
24+
},
25+
26+
data () {
27+
return {
28+
rates: '',
29+
}
30+
}
31+
}
32+
</script>

‎examples/vue/RateCard.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div style="margin: 20px">
3+
<h2>{{rate.name}}</h2>
4+
<p>
5+
{{rate.currency}} - {{rate.rate}}
6+
</p>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import React from 'react'
12+
import gql from '../../'
13+
14+
export default {
15+
props: {
16+
rate: Object
17+
},
18+
fragments: {
19+
rate: gql`
20+
fragment _ on ExchangeRate {
21+
name
22+
currency
23+
rate
24+
}
25+
`,
26+
}
27+
}
28+
</script>

‎examples/vue/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>FraQL example</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="main.js"></script>
10+
</body>
11+
</html>

‎examples/vue/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Vue from 'vue'
2+
import ApolloClient from 'apollo-boost'
3+
import VueApollo from 'vue-apollo'
4+
import App from './App'
5+
6+
const client = new ApolloClient({
7+
uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
8+
})
9+
10+
Vue.use(VueApollo)
11+
12+
const apolloProvider = new VueApollo({
13+
defaultClient: client,
14+
})
15+
16+
new Vue({
17+
el: '#app',
18+
provide: apolloProvider.provide(),
19+
render: h => h(App),
20+
});

‎examples/vue/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "vue-example",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"start": "./node_modules/.bin/parcel",
7+
"build": "./node_modules/.bin/parcel build",
8+
"start:storybook": "./node_modules/.bin/start-storybook -p 8000 -c .storybook",
9+
"build:storybook": "build-storybook -c .storybook -o .out"
10+
},
11+
"devDependencies": {
12+
"@storybook/addons": "^3.4.5",
13+
"@storybook/cli": "^3.4.5",
14+
"@storybook/vue": "^3.4.5",
15+
"@vue/component-compiler-utils": "^1.3.0",
16+
"babel-core": "^6.26.3",
17+
"babel-preset-env": "^1.7.0",
18+
"babel-runtime": "^6.26.0",
19+
"css-loader": "^0.28.11",
20+
"parcel-bundler": "^1.8.1",
21+
"parcel-plugin-vue": "^1.5.0",
22+
"vue-loader": "14.2.1",
23+
"vue-template-compiler": "^2.5.16"
24+
},
25+
"dependencies": {
26+
"apollo-boost": "^0.1.6",
27+
"apollo-client": "^2.3.1",
28+
"graphql": "^0.13.2",
29+
"graphql-tag": "^2.9.2",
30+
"vue": "^2.5.16",
31+
"vue-apollo": "^3.0.0-beta.13"
32+
},
33+
"author": "Johan van Eck",
34+
"license": "MIT"
35+
}

0 commit comments

Comments
 (0)