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 how the best packages for adding a Stripe like menu, numeric currency input, icons, and resizable elements.

vue-stripe-menu

vue-stripe-menu lets us add a Stripe like menu to our app.

To install it, we run:

npm i vue-stripe-menu

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueStripeMenu from "vue-stripe-menu";
import "vue-stripe-menu/dist/vue-stripe-menu.css";
Vue.use(VueStripeMenu);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <vsm-menu
    :menu="menu"
    :base-width="380"
    :base-height="400"
    :screen-offset="10"
    element="header"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <template #default="{ item }">
      <div class="wrap-content">
        <div class="wrap-content__block">Header: {{ item.title }}</div>
        <div class="wrap-content__item">{{ item }}</div>
      </div>
    </template>
    <template #before-nav>
      <li class="vsm-section logo-section">
        <img src="http://placekitten.com/100/100" alt="logo">
      </li>
    </template>
    <template #title="data">{{ data.item.title }}</template>
    <template #after-nav>
      <li class="vsm-section vsm-mob-hide">
        <button>My Button</button>
      </li>
      <vsm-mob>Mobile Content</vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          title: "App",
          dropdown: "app",
          element: "span",
          attributes: {
            class: ["my-class1", { "my-class2": true }],
            "data-big": "yes"
          },
          listeners: {
            mouseover: evt => {
              console.log("news hover", evt);
            }
          },
          new_section: false
        },
        {
          title: "External Link",
          attributes: {
            href: "https://example.com",
            target: "_blank"
          }
        }
      ]
    };
  },
  methods: {
    onOpenDropdown() {
      console.log("onOpenDropdown");
    },
    onCloseDropdown() {
      console.log("onCloseDropdown");
    }
  }
};
</script>

We get an App link that displays something on hover.

The External Link link displays a link that we can click.

We also have a button.

item has the item.

We can also get the logo.

The menu is responsive so it displays different content when the screen is narrow.

We can style it the way we like.

There are slots to populate various items.

The default slot has the header items.

title has the title.

after-nav has the button.

#programming #software-development #web-development #javascript #vue #vue.js