Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at the best packages for adding tables, checkboxes, and manipulating text.
Vuetable-2
Vuetable-2 is an easy to use table component that can get data directly from an API and display it.
It’s made for Vue apps.
To use it, we run:
npm i vuetable-2
to install it.
Then we can write:
<template>
<div>
<vuetable
ref="vuetable"
api-url="https://vuetable.ratiw.net/api/users"
:fields="['name', 'nickname', 'salary']"
></vuetable>
</div>
</template>
<script>
import Vuetable from "vuetable-2/src/components/Vuetable";
export default {
components: {
Vuetable
}
};
</script>
to use it.
api-url is the URL with the data.
fields is the fields to display.
The items are within the data property of the returned JSON.
fields pick the fields of the entries to display.
vue-table-component
vue-table-component is another handy table component for Vue apps.
To use it, we run:
npm i vue-table-component moment
to install and moment, which is a dependency of this package.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { TableComponent, TableColumn } from "vue-table-component";
Vue.component("table-component", TableComponent);
Vue.component("table-column", TableColumn);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<table-component :data="data" sort-by="songs" sort-order="asc">
<table-column show="firstName" label="First name"></table-column>
<table-column show="lastName" label="Last name"></table-column>
</table-component>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
firstName: "james",
lastName: "smith"
},
{
firstName: "alex",
lastName: "wong"
}
]
};
}
};
</script>
We use the built in components to create the table.
table-component lets us populate the data.
table-column display the entries.
Now we have a table with sorting and filtering.
show is the property name of the entry to show.
label is the heading for the column.
vue-nl2br
vue-nl2br turns new line characters to br elements.
To use it, we run:
npm i vue-nl2br
to install it.
Then we write:
<template>
<nl2br tag="p" :text="`foonbar`"/>
</template>
<script>
import Nl2br from "vue-nl2br";
export default {
components: {
Nl2br
}
};
</script>
to use the nl2br component.
tag is the tag of the element to render.
text is the text that we want to display.
pretty-checkbox-vue
pretty-checkbox-vue is a package that lets us add a nice looking checkbox into our Vue app.
To use it, we run:
npm i pretty-checkbox-vue
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import PrettyCheckbox from "pretty-checkbox-vue";
Vue.use(PrettyCheckbox);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<p-check name="check" color="success" v-model="check">check</p-check>
</div>
</template>
<script>
export default {
data(){
return {
check: false
}
}
};
</script>
We use the p-check component to add the checkbox.
v-model binds the checked value to the checkbox.
We can style the checkbox and set hover and toggle states and more.
vue-clamp
vue-clamp is a clamp component to truncate text.
To use it, we run:
npm i vue-clamp
Then we can use it by writing:
<template>
<v-clamp autoresize :max-lines="1">{{ text }}</v-clamp>
</template>
<script>
import VClamp from "vue-clamp";
export default {
components: {
VClamp
},
data() {
return {
text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis lorem in facilisis lacinia. Fusce tempor nisl non tempor sagittis. Mauris tempor massa sit amet urna dignissim, id scelerisque leo eleifend. Integer consectetur orci nisl, sit amet lobortis risus ultricies et. Suspendisse semper condimentum libero, vitae aliquet nisi rhoncus a. Nulla consectetur tincidunt auctor. Praesent consequat nisl eget eros fermentum auctor. Sed pretium augue at sapien maximus eleifend. In in aliquam felis, vitae mollis nunc. Sed id tellus justo. Nam justo turpis, ultrices ut sagittis ac, accumsan vel augue. Maecenas pulvinar ultricies ipsum sed consectetur. Donec congue nulla eget sapien tempus, vitae placerat urna imperdiet. Pellentesque justo nisl, ultricies vel dignissim nec, finibus ornare dolor."
};
}
};
</script>
We import the component and set the max-line prop to set the maximum number of lines to display.
autoresize makes the clamped text resize automatically.
Conclusion
vue-clamp is a component to truncate text.
vue-nl2br lets us convert line breaks to br elements.
Vuetable-2 and vue-table-component are table components.
pretty-checkbox-vue is an easy to use checkbox.
