Components In Vue Js

Posted on  by admin

Create a new Vue.js application

A data table component provides an easy and convenient solution for representing and manipulating tabular data on the web application. Users are allowed to filter, format, paginate, edit, sort, add, and remove their data in a flexible, powerful way.

In this blog post, you will find the 10 best Vue.js datatable components to help developers handle large amounts of tabular data on data-driven app projects. I hope you like it.

Originally published Oct 14 2019, updated Mar 04 2022. A Vue.js data table component that features drag’n’drop, filtering, pagination, sorting, fixed table header/column, cell merging, editing, and much more.

2. Emitting Events To Share Data From Child To Parent

A simple, clean data table for VueJS with essential features like sorting, column filtering, pagination etc.

  • A fancy Materialize CSS data table VueJS component. Sorting, with numerical sorting. Fuzzy searching.
  • Custom topbar buttons. Flexible data-from-row extractor. Follows the Material Design spec.
  • Really, really efficient. handles thousands of rows flawlessly.

Vue Smart Table was created out of the need for a simple highly customizable data table plugin that could take advantage of Vue’s slots. A dynamic, feature-rich data grid/table component with the capabilities of filtering, pagination, sorting, editing and more.

What Is Data Table?

If you’re looking for more Vue.js components for creating complex data tables/grids on the web app, check out our Data Table section.

This post is suited for developers of all stages, including beginners.Here are a few things you should already have before going through this article:.

Node.js version 10.x and above installed. You can verify that you have this version by running the command below in your terminal/command prompt:.

PromptOption
Please pick a presetManually select features
Check the features needed for your projectTypeScript
Use class-style component syntax?Yes

Visual Studio Code editor or a similar code editor. Vue’s latest version installed globally on your machine. Vue CLI 3.0 installed on your machine. To do this, uninstall the old CLI version first:.

then install the new one:. Download a Vue starter project here.

Unzip the downloaded project. Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:.

Start with an existing Vue.js application

Vue has a way of communicating between two child components through a parent component using event emitters. When you set up an event in a child component and a listener in the parent component, the reaction is passed down through the parent to the nested components.

While this is a valuable solution, it can become clumsy as your project grows. Essentially, an event bus is a Vue.js instance that can emit events in one component, and then listen and react to the emitted event in another component directly — without the help of a parent component.

By definition, using an event bus is more efficient than using event emitters because it requires less code to run.

We’re going to create an event bus instance as a separate file, import it into the two components that are going to share data, and then allow the components to communicate through this shared instance in a safe, private channel.

This is commonly known as the publish-subscribe approach. Today, we’re going to walk through the process of creating and using the event bus to facilitate communication between two components. First, we want to create the event bus. We’ll do this inside our main.js file.

Before you start

After definition, your main.js file should look like this:. As you can see, we’ve created a new Vue instance — a secure abstraction where we can handle communication between components without involving the parent component in the correspondence.

We need two child components to communicate. However, you’ll notice there’s only one test.vue component in your starter project. Create a new file and call it test2.vue and paste the code block below inside it:.

Now, go to your App.vue file and import it like the Test.vue file.

Register the file under components like this:.

Now that your two components are ready, you can set up the event through emission in the Test component while you listen to the event in the Test2 component.

Write and edit your code

Open your Test.vue file and copy the code block below into it:. Here, you’ll see that the event bus was imported from main.js , the template displays one header element through props, and there is a click event on it that points to the logic in the methods section.

The manual change of the Test.vue component occurs inside the method section and emits an event through the event bus.

The statement tells Vue to emit an event called changeIt and pass the string changed header as argument.

After setting up the event, we need to make the second component listen and react to the event. Open your Test2.vue file and copy in the code block below:.

3. Using Vuex To Create An Application-Level Shared State

When the event bus imports, all we see inside the template is the interpolation symbol.

There isn’t a Vue directive or bindings. We’ll use a lifecycle hook to initialize the listening process as the app is mounted on the DOM.

The lifecycle hook is called created as the application is initialized.

The $on statement is now listening to a changeIt event, passing the data argument down, and setting it as the new header.

When you click the first header in the interface, both headers change. Vue automatically un-mounts and removes these listeners before the destruction of a Vue instance. However, if you want to manually destroy them, you can run this simple command:.

1. Using Props To Share Data From Parent To Child

The complete code to this tutorial can be found here on GitHub. Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session.

If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. LogRocket is like a DVR for web apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more.

Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps – Start monitoring for free. This has been an introduction to the event bus in Vue.js.