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 affixing elements, managing session storage, adding draggable elements, pagination, and context menu.
vue-affix
We can use the vue-affix package to put an element before another element.
To use it, we run:
npm i vue-affix
Then we can use it by writing:
<template>
<div>
<affix class="sidebar" relative-element-selector="#section">
<p>foo</p>
<p>bar</p>
<p>baz</p>
</affix>
<section id="section">
<p>affix element</p>
</section>
</div>
</template>
<script>
import { Affix } from "vue-affix";
export default {
components: {
Affix
}
};
</script>
We set the relative-element-selector prop to the selector that we want to put the element before.
vue-context-menu
We can use vue-context-menu to show a context menu
To use it, we write:
npm i vue-context-menu
Then we can use it by writing:
<template>
<div>
<div @contextmenu.prevent="$refs.ctxMenu.open">right click</div>
<context-menu id="context-menu" ref="ctxMenu">
<li>option 1</li>
<li>option 2</li>
</context-menu>
</div>
</template>
<script>
import contextMenu from "vue-context-menu";
export default {
components: { contextMenu }
};
</script>
We listen to the contextmenu event and run $refs.ctxMenu.open to open the context menu.
In the context-menu component, we set the ref to ctxMenu so it can be opened.
We can put anything in our context menu.
vue-session
We can use the vue-session package to let us manage session storage.
To use it, we run:
npm i vue-session
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueSession from "vue-session";
Vue.use(VueSession);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$session.set("foo", "bar");
}
};
</script>
We set a value in session storage using the this.$session property.
We can also use get to get the value by the key,.
getAll gets all values.
colear removes all keys.
destroy destroys the session.
renew renews a session.
start starts a new session.
exists checks if a key exists.
draggable-vue-directive
draggable-vue-directive lets us create a draggable component with ease.
To use it, we run:
npm i draggable-vue-directive
to install it.
Then we write:
<template>
<div>
<div v-draggable>drag me</div>
</div>
</template>
<script>
import { Draggable } from "draggable-vue-directive";
export default {
directives: {
Draggable
}
};
</script>
to create a basic draggable element.
All we have to do is to use the v-draggable directive.
Also, we can set a value for it and access it:
<template>
<div>
<div v-draggable="draggableValue">drag me</div>
</div>
</template>
<script>
import { Draggable } from "draggable-vue-directive";
export default {
directives: {
Draggable
},
data() {
return {
draggableValue: {
onPositionChange: this.onPosChanged
}
};
},
methods: {
onPosChanged(positionDiff, absolutePosition, event) {
console.log(positionDiff, absolutePosition);
}
}
};
</script>
The draggableValue object can have various methods that are called when actions are done to the draggable element.
onPositionChange is run when the position of the draggable element changes position.
positionDiff is the difference in positions from the previous.
absolutePosition is the current position.
Othe properties we can put in the object include handle , onDragEnd , resetInitialPos , initialPosition , and more.
vue-paginate
We can use the vue-paginate package to paginate anything.
To use it, we run:
npm i vue-paginate
Then we can use it by writing:
<template>
<div>
<paginate name="fruits" :list="fruits" :per="2">
<li v-for="fruit in paginated('fruits')" :key="fruit">{{ fruit }}</li>
</paginate>
<paginate-links for="fruits"></paginate-links>
</div>
</template>
<script>
export default {
data() {
return {
fruits: ["apple", "orange", "grape", "banana", "pear"],
paginate: ["fruits"]
};
}
};
</script>
paginate has the paginated items.
per has the items per page.
We have the items to display inside the tags.
And pagination-links has the links to access each page.
Now we see the links for accessing each page, and the items on each page shown.
Conclusion
vue-affix lets us add an element as a sibling of another element.
vue-context-menu lets us add a context menu to our Vue app.
vue-paginate is a pagination component that we can use.
draggable-vue-directive lets us make draggable elements.
vue-session lets us manage session storage.
