Unknown plugin "transform-runtime"

[chrispage1]

I'm getting the below error when trying to pull in Vuetable & VuetablePagination. I'm using webpack to compile....

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

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/Users/chris/Sites/total-dashboard/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/Users/chris/Sites/total-dashboard/node_modules/vuetable-2"

In fact if I pull any source file I get an error... Any ideas?

Chris.

[ratiw]

@chrispage1 Try this.

[chrispage1]

Thanks @ratiw - I literally just managed to solve it and was going to post here.

I've managed to get it to work just by installing babel-preset-stage-2

Just stuck this in my devDependencies in package.json -

"babel-preset-stage-2": "^6.24.1",

Maybe its worth referencing in the docs?

Chris.

[ratiw]

@chrispage1 It's in the first lesson. People have been reporting the same issue before you, but I don't know if it put this in a wrong place or not. Any suggestion is welcome.

[chrispage1]

Sure it references installing using yarn but I don't use yarn for my Laravel project and a significant amount of people are using this in conjunction with Laravel.

Slightly off topic but no point raising a new issue - how can I increase the number of items per page? Probably missing it in the lessons.. sorry!

Chris.

[ratiw]

See here

[chrispage1]

Thanks @ratiw for the super quick responses and help. Sorry for being a pain! I'll close this now :)

[ratiw]

Not at all. :)

[chrispage1]

Sorry, just a couple more things that I hope you wont mind helping me with? No worries if not!

Firstly is it possible to merge two data fields. E.g. convert {first_name: "Joe", last_name: "Bloggs"} into one field row Full name?

Additionally, I've created a couple of buttons using a prop. I've bound to a click event to delete a row. Is there any way I can disable this delete button once its clicked? Then I can make an AJAX call to the backend, remove the row and only refresh on success..

Chris.

[ratiw]

1) You can either use __slot or __component to achieve that. Or, create another accessor field on your backend to combine those values as another field, so on the front-end side you can just use that field.

2) You have to handle that in the click event of the button. But there might be other vue component that can already do just that. Try google it, first.

[Peace-N]

Simply run:

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