ratiw / vuetable-2-with-laravel-5.4

Sample project using Vuetable-2 in Laravel 5.4 and Laravel-Mix

Sample project using Vuetable-2 with Laravel 5.4 and Laravel Mix

Trying this sample project

• clone the repo to your local machine
• cd into the directory
• install laravel dependency packages using composer install
• create .env file and generate APP_KEY using cp .env.example .env && php artisan key:generate
• install client-side javascript packages dependency by npm install
• run the project using php artisan serve or whatever appropriate in your machine setup.

You should see something like this.

Steps to use Vuetable-2 in your Laravel 5.4 project

• create laravel 5.4 project

    laravel new vuetable-l54
  

• go into the project directory and install node packages

    npm install
  

• create .env file by copying from .env.example

    cp .env.example .env
  

• generate APP_KEY

    php artisan key:generate
  

• replace welcome.blade.php with the version in the repo or just add component

• install additional babel plugins

    npm install babel-plugin-transform-runtime babel-preset-stage-2 babel-preset-es2015 --save-dev
  

• install vuetable-2

    npm install vuetable-2 --save-dev
  

• install vuetable-2 dependencies

    npm install accounting lodash moment vue-events --save-dev
  

• create your Vue component in resources\assets\js\components

• register the component in resources\assets\js\app.js

    Vue.component('my-vuetable', require('./components/MyVuetable.vue'));

• compile using Laravel-Mix by running

    npm run dev
  

vuetable-2-with-laravel-5.4's Issues

Listening to events in VueJS 2

Since there's no "events:" object anymore, what is the best way to listen for those events?

reactive grid

Hello, I want to ask if it possible to use this grid to add, update or delete single records without refreshing the whole grid. I was unable to find any information not even the documentation :/

A little bit of advice

vuetable-2 with laravel 5.4 + Spark

Hello all, I am having a problema installing this component, I did follow the tutorial but when I run "npm run dev" it show errors and freeze my whole system. Please help

npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/Code/faropro/faropro/npm-debug.log

CustomActions.vue - pass rowData

How to pass rowData props to CustomActions?

Extracting vuetable from the generated script

Hi.

I'm trying to integrate vuetable-2 into my Laravel application but cannot find out how to get vuetable-2 extracted into vendor.js. Any idea?

I have:
mix ... .extract(['vue','vuex','vuetable-2','jquery','axios','lodash','laravel-echo']);

Thanks a lot.

Great table. An error and a few things to add...

Hey,

Love the table I just installed it on a test L5.4 site following your instructions and have it working. Just about to replace your dummy data with some of my own using axios.

A couple of things:

1. the form html tag isn't closed in the filter bar .vue file and so laravel mix fails to compile.

2. you need to add the step:

npm install --save accounting moment

to your README. this isn't installed by default with L5.4 as far as i can tell. (without this laravel mix also fails)

Thanks

Luke

production.ERROR: RuntimeException: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths.

Install instructions do not work. I see only this in the browser window navigating to 127.0.0.1:8000:

Whoops, looks like something went wrong.
Whoops, looks like something went wrong.

Besides other messages there is one error in storage/logs/laravel.log:

production.ERROR: RuntimeException: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths. in /path/to/vuetable-2-with-laravel-5.4/vendor/laravel/framework/src/Illuminate/Encryption/Encrypter.php:43

Maximum call stack size exceeded in Laravel 5.5 + Spark

May I know is it not support Laravel 5.5 or any problem?
I move your resources/assets code to my laravel 5.5
and
<div id="app"> <div class="container"> <vuetable></vuetable> </div> </div>

to my view.

when load it , it show Maximum call stack size exceeded at console.
app.js:41233 Uncaught RangeError: Maximum call stack size exceeded at VueComponent.Vue._render (app.js:42501) at VueComponent.updateComponent (app.js:40887) at Watcher.get (app.js:41228) at new Watcher (app.js:41217) at mountComponent (app.js:40891) at VueComponent.Vue$3.$mount (app.js:46281) at VueComponent.Vue$3.$mount (app.js:48471) at init (app.js:41870) at createComponent (app.js:43512) at createElm (app.js:43455)

and try remove
<vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" :css="css.table" :sort-order="sortOrder" :multi-sort="true" detail-row-component="my-detail-row" :append-params="moreParams" @vuetable:cell-clicked="onCellClicked" @vuetable:pagination-data="onPaginationData" ></vuetable>

from MyVuetable. it fine.
so that problem come from vuetable tag.
Thanks

Any way to support server auth either via header manipulation, or custom HTTP handler?

I need a way to support authorization headers for data retrieval. I know axios has the ability, but I see no way to manipulate it in the current documentation.

Vuetable-2 data not displaying in the view

Hi @ratiw

I am getting this error when the table loads in the view. I currently cannot see any rows being displayed once the view renders. Can you assist please? Thanks in advance

Errors

XMLHttpRequest cannot load http://vuetable.ratiw.net/api/users?sort=&page=1&per_page=5. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

VM3314:1 XHR failed loading: GET "http://vuetable.ratiw.net/api/users?sort=&page=1&per_page=5".

load-error Error: Network Error

in my template I declare the component with everything that I need.

<vuetable 
  ref="vuetable" 
  :fields="fields" 
  api-url="http://vuetable.ratiw.net/api/users" 
  pagination-path="">
</vuetable>

Requires Python2?

It seems like npm install requires python2

Latest Python 3.8.0 doesn't seem to cut the mustard...

 `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Users\xxxx\AppData\Local\Programs\Python\Python38\python.EXE
gyp verb check python version `C:\Users\xxxx\AppData\Local\Programs\Python\Python38\python.EXE -c "import platform; print(platform.python_version());"` returned: "3.8.0\r\n"
gyp verb could not find "C:\Users\xxxx\AppData\Local\Programs\Python\Python38\python.EXE". checking python launcher
gyp verb could not find "C:\Users\xxxx\AppData\Local\Programs\Python\Python38\python.EXE". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Users\xxxx\AppData\Local\Programs\Python\Python38\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (D:\code\vuetable-2-with-laravel-5.4\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (D:\code\vuetable-2-with-laravel-5.4\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at D:\code\vuetable-2-with-laravel-5.4\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:158:21)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\code\\vuetable-2-with-laravel-5.4\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\code\vuetable-2-with-laravel-5.4\node_modules\node-sass```


Is there a specific PYTHON Env variable that needs to be set?

Add dropdown list filter

Hello , i want to keep the search filter that comes with this datatable , but i'd also like to add a drop down filter. Is it this even possible ?

[Request] Make vue-table responsive

the vue 1.x version vuetable was responsive and this appears to be non-responsive ? Without responsives the value of this component is increasingly falling every day.

Laravel mix sourcemaps issue when using vuetable-2

I am not able to use .sourceMaps() with laravel mix when using vuetable-2.

Each component i used (3) yield an error, here is one of them (they are almost identical) :

error  in ./node_modules/vuetable-2/src/components/Vuetable.vue

Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\xampp\\htdocs\\vuetest\\node_modules\\vuetable-2"
    at C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\xampp\htdocs\vuetest\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\xampp\htdocs\vuetest\node_modules\babel-loader\lib\index.js:49:20)
    at C:\xampp\htdocs\vuetest\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\xampp\htdocs\vuetest\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13)

 @ ./node_modules/vuetable-2/src/components/Vuetable.vue 8:2-219
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Listing.vue
 @ ./resources/assets/js/components/Listing.vue
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/UsersListing.vue
 @ ./resources/assets/js/components/UsersListing.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Tried with these package installed, but it does not help

"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",

Everything builds fine (with sourcemaps) when I comment the components including vuetable-2 components.

Do you have an idea why ?

Need help using laravel controller

Sir, can you help us how to fetch data like your json response using the controller method and eloquent?

npm install issue fix

fix for this is
edit your packages.json and add dist before the bin

node node_modules/cross-env/dist/bin/cross-env.js

next install babel preset 2015 and create your .babelrc

npm install babel preset 2015 --save

//.babelrc

{
  "presets": ["es2015"]
}

npm install returns a 500

npm install
npm ERR! code E500
npm ERR! 500 Internal Server Error: [email protected]

filter by every column

Hi
I want have input search for every column but this plugin has a input search
I would like multi filter
Can i do that ?