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 autocomplete input, translations, icons, and highlight words.
vuejs-auto-complete
vuejs-auto-complete is an easy to use autocomplete component for Vue apps.
To use it, we run:
npm i vuejs-auto-complete
to install it.
Then we write:
<template>
<div>
<autocomplete :source="source"></autocomplete>
</div>
</template>
<script>
import Autocomplete from "vuejs-auto-complete";
export default {
components: {
Autocomplete
},
data() {
return {
source: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }]
};
}
};
</script>
to use it.
We use the autocomplete to add the input.
We pass the data source for the autofill dropdown to the source prop.
We can also get data for the autofill directly from an API.
So we can write:
<template>
<div>
<autocomplete
source="https://api.github.com/search/repositories?q="
results-property="items"
results-display="full_name"
></autocomplete>
</div>
</template>
<script>
import Autocomplete from "vuejs-auto-complete";
export default {
components: {
Autocomplete
}
};
</script>
to do that.
source is the URL without the value of the query string.
results-property is the property for the array of results.
results-display is the property we display to the user.
We can also set request headers for the API request with the request-headers prop.
The entries can be formatted if we pass a function into the results-display prop.
vue-feather-icon
vue-feather-icon is a package that has icons we can use.
To use it, we install it by running:
npm i vue-feather-icon
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueFeatherIcon from "vue-feather-icon";
Vue.use(VueFeatherIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<activity-icon></activity-icon>
</div>
</template>
<script>
import { Activity } from "vue-feather-icon";
export default {
components: {
ActivityIcon: Activity
}
};
</script>
We register the plugin and we can use the icon from the package.
vue-highlight-words
We can use the vue-highlight-words package to add text highlighting.
To install it, we run:
npm i vue-highlight-words
Then we can use it by writing:
main.js
<template>
<div id="app">
<Highlighter
class="my-highlight"
:style="{ color: 'red' }"
highlightClassName="highlight"
:searchWords="keywords"
:autoEscape="true"
:textToHighlight="text"
/>
</div>
</template>
<script>
import Highlighter from "vue-highlight-words";
export default {
name: "app",
components: {
Highlighter
},
data() {
return {
text: "The quick brown fox jumps over the lazy dog",
words: "and or the"
};
},
computed: {
keywords() {
return this.words.split(" ");
}
}
};
</script>
We use the Highlighter component display the text with highlight.
textToHighlight has the text we want to apply highlighting to.
searchWords has an array of strings that we want to highlight in the textToHighlight text.
style is the style we set to the base text.
autoEscape escapes the text if it’s true .
vue-multilanguage
vue-multilanguage is a plugin we can use to display translations on the screen,
To use it, we run:
npm i vue-multilanguage
to install it.
Then we can write:
import Vue from "vue";
import App from "./App.vue";
import { MLInstaller, MLCreate, MLanguage } from "vue-multilanguage";
Vue.use(MLInstaller);
export default new MLCreate({
initial: "english",
languages: [
new MLanguage("english").create({
title: "hello {0}!",
msg: "You have {d} dogs"
}),
new MLanguage("french").create({
title: "bonjour {0}!",
msg: "Vous avez 5 chiens"
})
]
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<p v-text="$ml.get('myMessage')"/>
</div>
</template>
<script>
import { MLBuilder } from "vue-multilanguage";
export default {
name: "app",
data() {
return { dogs: 5 };
},
computed: {
mlmyMessage() {
return new MLBuilder("msg").with("d", this.dogs);
}
}
};
</script>
We register the plugin.
Then we use the MLCreate constructor to populate the translations and set the initial language.
Then in our App component, we use the $ml.get method to get the translation.
The argument is the property without the ml prefix.
We use MLBuilder to get the translation and call with to interpolate the placeholders.
Conclusion
vuejs-auto-complete lets us add an autocomplete input to our app.
vue-feather-icon is a collection of icons we can use in our Vue app.
vue-highlight-words is a component that lets us highlight part of a piece of text.
vue-multilanguage lets us localize our app with translations.
