Categories
Top Vue Packages

Top Vue Packages for Adding Context Menu, Managing Session Storage, and More

Spread the love

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.

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.