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 detecting clicks away from an element, adding a context menu, changing metadata, and adding split panes.
vue-meta-info
vue-meta-info is a Vue plugin to let us set metadata for our Vue app.
To use it, we run:
npm install vue-meta-info --save
to install the package.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
metaInfo: {
title: "my app",
meta: [
{
name: "keyWords",
content: "my app"
}
],
link: [
{
rel: "assets",
href: "https://assets-cdn.github.com/"
}
]
}
};
</script>
We import the plugin, then we can pass in the metaInfo property to set all the meta data.
title is the title.
meta are the meta attributes.
name is the attribute name and content is the value.
link is the link tag. rel is the rel attribute, href is the href attribute.
vue-linkify
vue-linkify is a plugin that automatically turns any text that looks like a URL into a link.
To use it, we run:
npm i vue-linkify
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import linkify from "vue-linkify";
Vue.directive("linkified", linkify);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div v-html="raw" v-linkified/>
</div>
</template>
<script>
export default {
data() {
return {
raw: "Hello from example.com"
};
}
};
</script>
We have the v-linkified directive and we set our raw text as the value of the v-html directive so we can render the link.
Also, we can change the class name of the link so that we can style it.
We can write:
<template>
<div id="app">
<div v-html="raw" v-linkified:options="{ className: 'example' }"/>
</div>
</template>
<script>
export default {
data() {
return {
raw: "Hello from example.com"
};
}
};
</script>
and the link will have class example .
Splitpanes
Splitpanes is a layout component for Vue apps.
To use it, we run:
npm i splitpanes
to install it.
Then we write:
<template>
<div id="app">
<splitpanes style="height: 400px">
<pane min-size="20">1</pane>
<pane>
<splitpanes horizontal>
<pane>2</pane>
<pane>3</pane>
</splitpanes>
</pane>
<pane>4</pane>
</splitpanes>
</div>
</template>
<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
components: { Splitpanes, Pane }
};
</script>
to use it.
We define panes to lay our columns, and we can nest them.
All we have to do is to use the splitpanes and pane component.
vue-clickaway2
We can use the vue-clickaway2 package to add detect clicks outside an element.
To use it, we run:
npm i vue-clickaway2
to install it.
Then we write:
<template>
<div id="app">
<p v-on-clickaway="away">Click away</p>
</div>
</template>
<script>
import { mixin as clickaway } from "vue-clickaway2";
export default {
mixins: [clickaway],
methods: {
away() {
console.log("clicked away");
}
}
};
</script>
to use it.
We use the v-on-clickaway directive to run a method when we click outside the p element.
Also, we can add modifiers to detect various mouse events.
For instance, we can add mousedown to detect a mousedown event instead of a click event.
v-contextmenu
v-contextmenu is a context menu component that we can use in our Vue app.
To use it, we run:
npm i v-contextmenu vue-runtime-helpers
to install it.
It has vue-runtime-helpers as a dependency.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import contentmenu from "v-contextmenu";
import "v-contextmenu/dist/index.css";
Vue.use(contentmenu);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<v-contextmenu ref="contextmenu">
<v-contextmenu-item>foo</v-contextmenu-item>
<v-contextmenu-item>bar</v-contextmenu-item>
<v-contextmenu-item>baz</v-contextmenu-item>
</v-contextmenu>
<div v-contextmenu:contextmenu>right click here</div>
</div>
</template>
<script>
export default {};
</script>
We register the plugin.
Then we use the v-contextmenu component to let us show a context menu when we right-click on it.
The modifier is the ref of the context menu’s name.
Then we use the v-contextmenu to add our context menu.
The component can be nested to create a nested menu.
Conclusion
vue-meta-info lets us change the title and metadata of our Vue app.
Splitpanes lets us add a split pane.
vue-clickaway2 detects clicks outside an element.
v-contextmenu is a context menu component for our app.
