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.
Let's begin by setting up the plugin object. It is recommended to create it in a separate file and export it, as shown below to keep the logic contained and separate. Our $translate function will take a string such as greetings. hello , look inside the user provided configuration and return the translated value.
Most of Vue plugins and third-party libraries will not work on Vue3 (yet) due to the breaking changes on the Global API see reference.
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
You have two ways available to make a third party component available to your custom Vue component:
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.
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:
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With