11

I need to output a table and it's content which can be updated via Ajax. So I'm planning to use vue-tables-2 (https://github.com/matfish2/vue-tables-2) which is a Vue.js plugin.

Using the Laravel way, I'm writing a Vue.js custom component, so how can I use the vue-tables-2 plugin inside my component?

Here an example of how to use the plugin https://jsfiddle.net/matfish2/jfa5t4sm/ . Unfortunately in the example is not wrapping the plugin inside a component.

Matanya
  • 6,233
  • 9
  • 47
  • 80
Luigi T.
  • 506
  • 3
  • 11
  • 22

5 Answers5

14

You have two ways available to make a third party component available to your custom Vue component:

1. Import (ES6) and use locally

In your component's script block, put this on top:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

In your component VM, add this to the components property:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

You can now use the <v-server-table>, <v-client-table> etc in your component template.

2. Import (ES6) globally in your application entry point:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

Then make those parts of vue-tables-2 that you application repeatedly needs available to your main Vue file and all child components:

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Or/And:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

This can also be found on the vue-tables-2 documentation GitHub page.

Note: When you are not using a build system like webpack in your Vue application, there's a third way:

3. Make globally available when not using webpack or the likes

Put this in your HTML before including you application script:

<script src="/path/to/vue-tables-2.min.js"></script>

This will expose a global VueTables object so in your application entry point you can

Vue.use(VueTables.ClientTable);

If you use the global way, you don't have to declare those 3rd party components in the components object of your custom component.

Why would I pick either method over the other?

Importing globally has the advantage of you having to write less code and following the DRY principle (don't repeat yourself). So this does make sense if your whole application at many points needs that plugin/3rd party Vue component.

It does, though, have the downside that it makes your custom components harder to reuse across several applications/projects because they no longer declare their own dependencies.

Also, if your own custom components at some point gets removed from your application for whatever reason, your application will still include the vue-tables-2 package, which might not be needed any more. In this scenario it will uselessly increase your bundle size.

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • As I wrote in my answer below, this is not the way to go. The components are registered with `Vue.use` once on the entry point, and are then available throughout the project – Matanya Jan 06 '18 at 05:58
  • That's the "lazy" way of making third party components available to you whole app, that is, any descendant component, which is advisable if you need the same 3rd party component across many parts of your application. It is, though, not what OP asked for. It does make sense to add that to the answer, though. Thanks for hinting me! – connexo Jan 06 '18 at 10:59
  • How do you specify the options with method 1? – chi11ax May 21 '19 at 23:25
  • Hmm..., when I try to use the vue table locally, inside component (Laravel project), i get `app.js?id=6518adafaa2115fa97b8:28640 [Vue warn]: Failed to mount component: template or render function not defined.`. Here is a screenshot of my component: http://prntscr.com/qt3au9 And here is the error msg: http://prntscr.com/qt3c3y – Guntar Jan 26 '20 at 15:49
1

Usually, when a component is coupled to a plugin, i use created:

created() {
    Vue.use(MustUsePlugin, { someOption: this.someProp });
},
Monkey Monk
  • 984
  • 9
  • 19
-1

The components are registered only once, globally, using Vue.use in the entry point to your project (e.g main.js). Then you can use them in all descendant .vue files without importing them.

Matanya
  • 6,233
  • 9
  • 47
  • 80
  • 3
    That's the "lazy" way of making third party components available to you whole app, that is, any descendant component, which is advisable if you need the same 3rd party component across many parts of your application. It is, though, not what OP asked for. – connexo Jan 06 '18 at 10:42
  • I know what the OP asked for, but it's not possible with this package. The package in question (vue-tables-2) uses `exports.install` to set the components when you call `Vue.use`, and in this method registers them globally (see v-server-table.js and v-client-table.js). It cannot be used locally. The first option in the accepted answer will NOT work. – Matanya Aug 11 '21 at 09:17
-2

You could extend it or even download it from github and edit it directly

Maxim
  • 5
  • 2
  • 1
    As I installed the module via NPM I'd prefer to avoid editing the plugin and call it from inside a custom component. – Luigi T. Jan 02 '18 at 20:02
  • Then I would go for extending it or do as connexo already said. – Maxim Jan 03 '18 at 07:33
  • Direct edits are bad practice, as you would need to edit it on every install/update, e.g. via NPM/Yarn. – abaumg Dec 21 '21 at 10:20
-2

How to install plugin

So just follow the instructions.

Pavel
  • 918
  • 7
  • 18
  • I had no problem in installing the module, I didn't figure out how to use it from inside a custom Vue component. – Luigi T. Jan 02 '18 at 20:03