Level 9
+1
1 like
Oct 17, 2016
13
Level 2
Laravel 5.3 and Vue-table-2
Is there any video or step-by-step guide to set up the Vue-table-2 in laravel 5.3 ?
Level 8
+2
Level 8
Has anyone found a workaround to this?
ERROR in ./~/vue-tables-2/lib/template.jsx
Module parse failed: .../node_modules/vue-tables-2/lib/template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.
| var perPage = require('./template/per-page.jsx')(h, this);
|
| return <div class={"VueTables VueTables--" + this.source}>
| <div class="row">
| <div class="col-md-6">
@ ./~/vue-tables-2/lib/v-client-table.js 1:15-40
@ ./~/vue-tables-2/index.js
@ ./resources/assets/js/bootstrap.js
@ ./resources/assets/js/app.js
@ multi main
Level 2
Create .babelrc file and add the following lines { "presets": ["es2015"], }
Level 5
I'm quite new to the whole laravel/npm/gulp/vue stuff so bear with me, but this worked for me.
New project
laravel new vue-tables-2-example
cd vue-tables-2-example
npm install
Install the required babel packages:
npm install\
babel-core\
babel-loader\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
Install vue-tables-2 and vue-pagination-2:
npm install\
vue-tables-2\
vue-pagination-2\
--save-dev
In package.json (or create a .babelrc file in the root directory) add:
"babel": {
"presets": [ "es2015" ],
"plugins": [ "transform-vue-jsx" ]
}
In gulpfile.js (or if you have a webpack.config.js file) add the jsx loader and include the vue-tables-2 and vue-pagination-2 directories:
elixir((mix) => {
Elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
}]
}
});
mix.sass('app.scss')
.webpack('app.js')
.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap');
});
Content of app.js to make the example work:
require('./bootstrap');
var VueTables = require('vue-tables-2');
Vue.use(VueTables.client, {
compileTemplates: true,
highlightMatches: true,
pagination: {
dropdown:true,
chunk:5
},
filterByColumn: true,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});
const app = new Vue({
el: '#app',
data: {
columns: ['id','name','age'],
tableData: [
{id:1, name:"John",age:"20"},
{id:2, name:"Jane",age:"24"},
{id:3, name:"Susan",age:"16"},
{id:4, name:"Chris",age:"55"},
{id:5, name:"Dan",age:"40"}
],
options: {
// see the options API
}
}
});
Content of welcome.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue-tables-2-example</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div id="app" class="col-md-8 col-md-offset-2">
<v-client-table
:data="tableData"
:columns="columns"
:options="options">
</v-client-table>
</div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
And finally run gulp:
gulp
11 likes
SOLVED
Module parse failed: C:\laragon\www\vue-tables-2-example\node_modules\vue-tables-2\lib\template.jsx Unexpected token (15:7) You may need an appropriate loader to handle this file type.
this :
exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))\//
2 likes
Level 8
@grafi thank you, your solution worked for me
Level 9
Hello, @grafi thank you, Your solution worked for me also. Do you have Eloquent example for data format?
Level 12
vue-tables-2 is now served pre-compiled and no longer requires any transforms\loaders.
1 like
Level 8
has anyone used this with large data sets? The search function is struggling on a table with 2000 rows and i'm wondering if there's any tricks to optimize it?
@matfish2 any advice?
Level 12
I've recently applied the debounce option to the client component as well (defaults to 250ms).
This should solve the sluggish search problem as the function is only called once when the user is finished typing. I've tested it myself on Chrome and didn't experience any significant delay (other than the debounce timeout).
1 like
Level 8
@matfish2 awesome, i'll update and check it out.
By the way, thanks for building/maintaining this package. It has been extremely useful.
Level 12
vue-tables-2 now offers a minified version and a demo
Please or to participate in this conversation.