Categories
Top Vue Packages

Top Vue Packages for Adding Toolbars, Canvas, Tables, and Tag Inputs

Spread the love

SimplebarVue

SimplebarVue lets us add a toolbar to a Vue app.

To install it, we run:

npm i simplebar-vue

Then we can use it by writing:

main.js

<template>
  <simplebar data-simplebar-auto-hide="false">toolbar</simplebar>
</template>

<script>
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";

export default {
  components: {
    simplebar
  }
};
</script>

We just import the simplebar component and use it.

vue-konva

vue-konva is a library that makes working with the HTML canvas much easier than with the built-in library.

To use it, we first install it by running:

npm i vue-konva konva

Konva is a required dependency of vue-konva.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueKonva from "vue-konva";

Vue.use(VueKonva);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We registered the VueKonva plugin.

Then we can use the built-in components buy writing:

<template>
  <div>
    <v-stage :config="configKonva">
      <v-layer>
        <v-circle :config="configCircle"></v-circle>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 500,
        height: 500
      },
      configCircle: {
        x: 150,
        y: 150,
        radius: 70,
        fill: "red",
        stroke: "green",
        strokeWidth: 2
      }
    };
  }
};
</script>

We set up the canvas by using the v-stage and v-layer components.

Inside it, we have the v-circle component to create a circle.

configKonva sets the size of the canvas.

configCircle sets the options for the circle.

We made the circle fill red and the border green.

x is the x-coordinate of the center.

y is the y-coordinate of the center.

vue-table-component

vue-table-component is a table component that has sorting and filter capabilities.

To install it, we run:

npm i vue-table-component moment

Moment is a required dependency of vue-table-component.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import TableComponent from "vue-table-component";

Vue.use(TableComponent);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <table-component :data="data" sort-by="firstName" sort-order="asc">
      <table-column show="firstName" label="First name"></table-column>
      <table-column show="lastName" label="Last name"></table-column>
      <table-column label :sortable="false" :filterable="false">
        <template slot-scope="row">
          <a :href="`#${row.firstName}`">Edit</a>
        </template>
      </table-column>
    </table-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          firstName: "john",
          lastName: "smith"
        },
        {
          firstName: "mary",
          lastName: "green"
        },
        {
          firstName: "alex",
          lastName: "wong"
        },
        {
          firstName: "jane",
          lastName: "doe"
        }
      ]
    };
  }
};
</script>

Now we have a table with sorting and filtering capabilities built-in.

sort-by lets us set the field to sort by.

sort-order is the sort order.

table-column set the table columns.

show has the property of the entry we want to display.

sortable lets us set whether a column is sortable.

filterable lets us set whether a column is filterable.

There are many other options.

vue-tags-input

vue-tags-input lets us add a tag input to our Vue app.

To install it, we run:

npm i @vojtechlanka/vue-tags-input

Then to use it, we write:

main.js

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :is-draggable="true"
      @tags-changed="newTags => tags = newTags"
      @tag-order-changed="newTags => tags = newTags"
    />
    <p>{{tags}}</p>
  </div>
</template>
<script>
import VueTagsInput from "@vojtechlanka/vue-tags-input";

export default {
  components: {
    VueTagsInput
  },
  data() {
    return {
      tag: "",
      tags: []
    };
  }
};
</script>

tags-changed is emitted when tags are changed by adding or otherwise.

tag-order-changed is emitted when their order changed by dragging.

v-model binds the input value of the tag is entered.

is-draggable set to true makes the tags draggable.

Conclusion

SimplebarVue is a Vue component for adding toolbars.

vue-konva is a package for letting us work with the canvas in Vue apps.

vue-table-component lets us add tables with sorting and filtering with ease.

vue-tags-input lets us add inputs to our app.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.