Skip to content

Commit 202fdc0

Browse files
kiakingkiaking
committed
Implement the application
1 parent 9bb0271 commit 202fdc0

32 files changed

+1089
-11
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# Vuex ORM Examples
22

3-
The example application to demonstrate the use case of the [Vuex ORM](https://github.com/revolver-app/vuex-orm).
3+
The example application to demonstrate the use case of the [Vuex ORM](https://github.com/revolver-app/vuex-orm). It's a simple ToDo application which can add assignee to each todo. You can see how Vuex ORM connects those two models – Todo and Assignee – and how to create, edit and delete them.
4+
5+
![Vuex ORM Example](screenshot.png)
46

57
## Running The Example
68

@@ -15,3 +17,7 @@ $ npm run dev
1517
$ yarn install
1618
$ yarn dev
1719
```
20+
21+
## Contribution
22+
23+
If you have any idea to make this example application easier to understand to people who are new to the Vuex ORM, please open an issue, or pull request :tada:

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@
55
"build": "NODE_ENV=production webpack"
66
},
77
"devDependencies": {
8+
"autoprefixer": "^7.2.5",
89
"babel-core": "^6.26.0",
910
"babel-loader": "^7.1.2",
1011
"babel-preset-env": "^1.6.1",
1112
"babel-preset-stage-2": "^6.24.1",
1213
"css-loader": "^0.28.8",
1314
"express": "^4.16.2",
15+
"normalize.css": "^7.0.0",
16+
"postcss-css-variables": "^0.8.0",
17+
"postcss-import": "^11.0.0",
18+
"postcss-nested": "^3.0.0",
1419
"vue": "^2.5.13",
1520
"vue-loader": "^13.7.0",
1621
"vue-template-compiler": "^2.5.13",

‎postcss.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const path = require('path')
2+
3+
const rootDir = path.join(__dirname, '.')
4+
5+
module.exports = {
6+
plugins: {
7+
'postcss-import': { root: rootDir, path: [`${rootDir}/src`] },
8+
'postcss-nested': {},
9+
'postcss-css-variables': {},
10+
'autoprefixer': {}
11+
}
12+
}

‎public/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Vuex ORM – ToDo</title>
8+
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,400|Open+Sans:400,700">
810
</head>
911
<body>
1012
<div id="app"></div>

‎screenshot.png

384 KB
Loading

‎server.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ app.use(webpackDevMiddleware(compiler, {
1414
publicPath: '/js',
1515
stats: {
1616
colors: true,
17-
chunks: false
17+
chunks: false,
18+
modules: false
1819
}
1920
}))
2021

‎src/app.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
console.log('Hello, world!')
1+
import Vue from 'vue'
2+
import App from './components/App'
3+
4+
const app = new Vue(App)
5+
6+
app.$mount('#app')

‎src/components/App.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div class="App">
3+
<AppHeader />
4+
5+
<Description />
6+
7+
<div class="container">
8+
<div class="users"><Users /></div>
9+
<div class="todos"><Todos /></div>
10+
</div>
11+
12+
<AppFooter />
13+
</div>
14+
</template>
15+
16+
<script>
17+
import data from '../data'
18+
import store from '../store'
19+
import AppHeader from './AppHeader'
20+
import Description from './Description'
21+
import Users from './Users'
22+
import Todos from './Todos'
23+
import AppFooter from './AppFooter'
24+
25+
export default {
26+
store,
27+
28+
components: {
29+
AppHeader,
30+
Description,
31+
Users,
32+
Todos,
33+
AppFooter
34+
},
35+
36+
created () {
37+
// Here we are stubbing the initial data. In the real world, this
38+
// should be the response from the API Backend.
39+
const initialData = data
40+
41+
this.$store.dispatch('entities/todos/create', { data: initialData })
42+
}
43+
}
44+
</script>
45+
46+
<style src="../styles/bootstrap.css"></style>
47+
48+
<style scoped>
49+
.App {
50+
padding: 96px 48px 128px;
51+
}
52+
53+
.container {
54+
display: flex;
55+
margin: 0 auto;
56+
width: 960px;
57+
}
58+
59+
.users {
60+
padding-right: 48px;
61+
width: calc(100% / 3);
62+
}
63+
64+
.todos {
65+
width: calc((100% / 3) * 2);
66+
}
67+
</style>

‎src/components/AppFooter.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="AppFooter">
3+
<p class="text">Proudy Created by <a href="https://vuejs.org/" target="_blank">Vue</a>, and Powered by <a href="https://github.com/revolver-app/vuex-orm">Vuex ORM</a>.</p>
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
@import "styles/variables";
9+
10+
.AppFooter {
11+
padding-top: 96px;
12+
text-align: center;
13+
color: var(--c-gray);
14+
15+
a {
16+
color: var(--c-black);
17+
transition: all .3s;
18+
}
19+
20+
a:hover {
21+
color: var(--c-gray);
22+
}
23+
}
24+
</style>

‎src/components/AppHeader.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="AppHeader">
3+
<h1 class="title">ToDo</h1>
4+
<p class="lead">Vuex ORM Example Application</p>
5+
</div>
6+
</template>
7+
8+
<style scoped>
9+
@import "styles/variables";
10+
11+
.AppHeader {
12+
padding-bottom: 24px;
13+
text-align: center;
14+
}
15+
16+
.title {
17+
padding-bottom: 8px;
18+
line-height: 42px;
19+
font-family: var(--font-family-primary);
20+
font-size: 34px;
21+
}
22+
23+
.lead {
24+
font-size: 16px;
25+
color: var(--c-gray);
26+
}
27+
</style>

0 commit comments

Comments
 (0)