Skip to content

Commit 6360c66

Browse files
gilbitrongilbitron
committed
Add example
1 parent 70dd6fd commit 6360c66

File tree

8 files changed

+221
-0
lines changed

8 files changed

+221
-0
lines changed

‎example/.babelrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

‎example/.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
yarn.lock
7+
8+
# Editor directories and files
9+
.idea
10+
*.suo
11+
*.ntvs*
12+
*.njsproj
13+
*.sln

‎example/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Laravel Vue Pagination Example
2+
3+
```bash
4+
npm install
5+
# then
6+
npm run dev
7+
# or
8+
npm run build
9+
```

‎example/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Laravel Vue Pagination Example</title>
6+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="/dist/build.js"></script>
11+
</body>
12+
</html>

‎example/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"scripts": {
3+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
4+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
5+
},
6+
"dependencies": {
7+
"vue": "^2.5.11"
8+
},
9+
"browserslist": [
10+
"> 1%",
11+
"last 2 versions",
12+
"not ie <= 8"
13+
],
14+
"devDependencies": {
15+
"babel-core": "^6.26.0",
16+
"babel-loader": "^7.1.2",
17+
"babel-preset-env": "^1.6.0",
18+
"babel-preset-stage-3": "^6.24.1",
19+
"cross-env": "^5.0.5",
20+
"css-loader": "^0.28.7",
21+
"file-loader": "^1.1.4",
22+
"vue-loader": "^13.0.5",
23+
"vue-template-compiler": "^2.4.4",
24+
"webpack": "^3.6.0",
25+
"webpack-dev-server": "^2.9.1"
26+
}
27+
}

‎example/src/App.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div id="app">
3+
<pagination :data="laravelData" :limit="2" v-on:pagination-change-page="getResults"></pagination>
4+
</div>
5+
</template>
6+
7+
<style>
8+
#app { padding: 50px; }
9+
</style>
10+
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
laravelData: {},
17+
}
18+
},
19+
20+
mounted() {
21+
this.getResults();
22+
},
23+
24+
methods: {
25+
getResults(page) {
26+
if (!page) {
27+
page = 1;
28+
}
29+
30+
var dummyData = [
31+
{ id: 1 },
32+
{ id: 2 },
33+
{ id: 3 },
34+
{ id: 4 },
35+
{ id: 5 },
36+
{ id: 6 },
37+
{ id: 7 },
38+
{ id: 8 },
39+
{ id: 9 },
40+
{ id: 10 },
41+
{ id: 11 },
42+
{ id: 12 },
43+
{ id: 13 },
44+
{ id: 14 },
45+
{ id: 15 },
46+
{ id: 16 },
47+
{ id: 17 },
48+
{ id: 18 },
49+
{ id: 19 },
50+
{ id: 20 },
51+
];
52+
53+
this.laravelData = {
54+
current_page: page,
55+
data: dummyData,
56+
from: page,
57+
last_page: dummyData.length,
58+
next_page_url: page < dummyData.length ? 'http://example.com/page/2' : null,
59+
per_page: 1,
60+
prev_page_url: page > 1 ? 'http://example.com/page/1' : null,
61+
to: page + 1,
62+
total: dummyData.length,
63+
};
64+
}
65+
}
66+
}
67+
</script>

‎example/src/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
4+
Vue.component('pagination', require('../../src/laravel-vue-pagination'));
5+
6+
new Vue({
7+
el: '#app',
8+
render: h => h(App)
9+
});

‎example/webpack.config.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.css$/,
15+
use: [
16+
'vue-style-loader',
17+
'css-loader'
18+
],
19+
}, {
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
loaders: {
24+
}
25+
// other vue-loader options go here
26+
}
27+
},
28+
{
29+
test: /\.js$/,
30+
loader: 'babel-loader',
31+
exclude: /node_modules/
32+
},
33+
{
34+
test: /\.(png|jpg|gif|svg)$/,
35+
loader: 'file-loader',
36+
options: {
37+
name: '[name].[ext]?[hash]'
38+
}
39+
}
40+
]
41+
},
42+
resolve: {
43+
alias: {
44+
'vue$': 'vue/dist/vue.esm.js'
45+
},
46+
extensions: ['*', '.js', '.vue', '.json']
47+
},
48+
devServer: {
49+
historyApiFallback: true,
50+
noInfo: true,
51+
overlay: true
52+
},
53+
performance: {
54+
hints: false
55+
},
56+
devtool: '#eval-source-map'
57+
}
58+
59+
if (process.env.NODE_ENV === 'production') {
60+
module.exports.devtool = '#source-map'
61+
// http://vue-loader.vuejs.org/en/workflow/production.html
62+
module.exports.plugins = (module.exports.plugins || []).concat([
63+
new webpack.DefinePlugin({
64+
'process.env': {
65+
NODE_ENV: '"production"'
66+
}
67+
}),
68+
new webpack.optimize.UglifyJsPlugin({
69+
sourceMap: true,
70+
compress: {
71+
warnings: false
72+
}
73+
}),
74+
new webpack.LoaderOptionsPlugin({
75+
minimize: true
76+
})
77+
])
78+
}

0 commit comments

Comments
 (0)