Skip to content

Commit 2956e73

Browse files
author
Sébastien Chopin
committed
Loading component done
- Loading component working and customisable via nuxt.config.js (see examples/async-data/) - Accept callback for new Nuxt(options, cb) with cb(null, nuxt) - Simplify async-data example
1 parent 3d206de commit 2956e73

7 files changed

Lines changed: 115 additions & 35 deletions

File tree

‎examples/async-data/nuxt.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
module.exports = {
2-
vendor: ['axios'] // Add axios in the vendor.bundle.js
2+
vendor: ['axios'], // Add axios in the vendor.bundle.js
3+
loading: {
4+
color: '#4FC08D',
5+
failedColor: '#bf5050',
6+
duration: 1500
7+
}
38
}

‎examples/async-data/pages/post.vue‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,9 @@ const axios = require('axios')
1111
1212
export default {
1313
data ({ req }) {
14-
return new Promise((resolve, reject) => {
15-
axios.get('https://jsonplaceholder.typicode.com/posts/1')
16-
.then((res) => {
17-
resolve({
18-
post: res.data
19-
})
20-
})
14+
return axios.get('https://jsonplaceholder.typicode.com/posts/1')
15+
.then((res) => {
16+
return { post: res.data }
2117
})
2218
}
2319
}

‎lib/app/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ export default {
2626
err = err || null
2727
this.err = err || null
2828
<% if (loading) { %>
29-
if (this.err && this.$loading) {
30-
this.$loading.fail && this.$loading.fail()
29+
if (this.err && this.$loading && this.$loading.fail) {
30+
this.$loading.fail()
3131
}
3232
<% } %>
3333
return this.err
3434
}
3535
},
3636
components: {
37-
ErrorPage
37+
ErrorPage<%= (loading ? ',\n\t\tLoading' : '') %>
3838
}
3939
}
4040
</script>

‎lib/app/client.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function render (to, from, next) {
8080
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
8181
next()
8282
})
83-
.catch(function (error) {
83+
.catch((error) => {
8484
this.error(error)
8585
next(false)
8686
})

‎lib/app/components/Loading.vue‎

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,104 @@
11
<template>
2-
<p>LOADING...</p>
2+
<div class="progress" :style="{
3+
'width': percent+'%',
4+
'height': height,
5+
'background-color': canSuccess? color : failedColor,
6+
'opacity': show ? 1 : 0
7+
}"></div>
38
</template>
49

510
<script>
11+
const Vue = require('vue')
12+
613
export default {
714
data () {
815
return {
16+
percent: 0,
17+
show: false,
18+
canSuccess: true,
919
duration: <%= loading.duration %>,
10-
loadingColor: '<%= loading.loadingColor %>',
11-
errorColor: '<%= loading.errorColor %>',
20+
height: '<%= loading.height %>',
21+
color: '<%= loading.color %>',
22+
failedColor: '<%= loading.failedColor %>',
1223
}
1324
},
1425
methods: {
15-
start () {},
16-
increase () {},
17-
decrease () {},
18-
set () {},
19-
finish () {},
20-
pause () {},
21-
hide () {},
22-
fail () {}
26+
start () {
27+
this.show = true
28+
this.canSuccess = true
29+
if (this._timer) {
30+
clearInterval(this._timer)
31+
this.percent = 0
32+
}
33+
this._cut = 10000 / Math.floor(this.duration)
34+
this._timer = setInterval(() => {
35+
this.increase(this._cut * Math.random())
36+
if (this.percent > 95) {
37+
this.finish()
38+
}
39+
}, 100)
40+
return this
41+
},
42+
set (num) {
43+
this.show = true
44+
this.canSuccess = true
45+
this.percent = Math.floor(num)
46+
return this
47+
},
48+
get () {
49+
return Math.floor(this.percent)
50+
},
51+
increase (num) {
52+
this.percent = this.percent + Math.floor(num)
53+
return this
54+
},
55+
decrease () {
56+
this.percent = this.percent - Math.floor(num)
57+
return this
58+
},
59+
finish () {
60+
this.percent = 100
61+
this.hide()
62+
return this
63+
},
64+
pause () {
65+
clearInterval(this._timer)
66+
return this
67+
},
68+
hide () {
69+
clearInterval(this._timer)
70+
this._timer = null
71+
setTimeout(() => {
72+
this.show = false
73+
Vue.nextTick(() => {
74+
setTimeout(() => {
75+
this.percent = 0
76+
}, 100)
77+
})
78+
}, 800)
79+
return this
80+
},
81+
fail () {
82+
this.canSuccess = false
83+
this.percent = 100
84+
this.hide()
85+
return this
86+
}
2387
}
2488
}
2589
</script>
2690

2791
<style scoped>
28-
p {
29-
color: grey;
30-
}
92+
.progress {
93+
position: fixed;
94+
top: 0px;
95+
left: 0px;
96+
right: 0px;
97+
height: 2px;
98+
width: 0%;
99+
transition: width 0.2s, opacity 0.6s;
100+
opacity: 1;
101+
background-color: #efc14e;
102+
z-index: 999999;
103+
}
31104
</style>

‎lib/nuxt.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ class Nuxt {
2828
store: false,
2929
cache: false,
3030
loading: {
31-
loadingColor: 'black',
32-
errorColor: 'red',
31+
color: 'black',
32+
failedColor: 'red',
33+
height: '2px',
3334
duration: 5000
3435
}
3536
}
@@ -55,12 +56,14 @@ class Nuxt {
5556
this.build = build.bind(this)
5657
// Launch build and set this.renderer
5758
return co(this.build)
58-
// .then((nuxt) => {
59-
// if (typeof cb === 'function') cb(null, nuxt)
60-
// })
61-
// .catch((err) => {
62-
// if (typeof cb === 'function') cb(err)
63-
// })
59+
.then((nuxt) => {
60+
if (typeof cb === 'function') cb(null, nuxt)
61+
return nuxt
62+
})
63+
.catch((err) => {
64+
if (typeof cb === 'function') cb(err)
65+
return err
66+
})
6467
}
6568

6669
render (req, res) {
@@ -114,6 +117,9 @@ class Nuxt {
114117
const self = this
115118
return co(function * () {
116119
const html = yield self.renderToString(context)
120+
if (context.nuxt && context.nuxt.error instanceof Error) {
121+
context.nuxt.error = { statusCode: 500, message: context.nuxt.error.message }
122+
}
117123
const app = self.appTemplate({
118124
isProd: self.isProd, // Use to add the extracted CSS <link> in production
119125
APP: html,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nuxt",
3-
"version": "0.1.3",
3+
"version": "0.1.4",
44
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
55
"main": "index.js",
66
"license": "MIT",

0 commit comments

Comments
 (0)