🖥️ UI Menu Toolbar & Content Editor For Vue Apps

File toolbar menu is a component of Vue.js to create a customizable, multilingual, easy-to-touch HTML toolbar menu with editor options for HTML content.

toolbar example, text editor toolbar html, rich text editor toolbar icons, rte toolbar, toolbar has no editor, accessible rich text editor, html toolbar, accessibility toolbar

Features

Async list content (stored in Vue.js computed fields/data, not in <template>)
Easy design
Add your own custom components for menus and buttons
Uses standard material icons
Hotkey support
Touch compatible
Easy multi-language implementation (vue-i18n)
Migrated to Vue.js 3.x (for use with Vue 2.x, select the 1.x library version)

How to make use of it:

Install and download:

# NPM
$ npm install vue-file-toolbar-menu --save

1. Import the component.

import VueFileToolbarMenu from 'vue-file-toolbar-menu';

2. Add the File Toolbar Menu component to the template.

<template>
  <div> 
    <vue-file-toolbar-menu :content="my_menu" /> 
  </div>
</template>

3. Register the component and insert your own elements into the component.

export default {
  components: { VueFileToolbarMenu },
  data () {},
  computed: {
    my_menu () {
      return [
        { text: "Home", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          // More Buttons Here
        }
      ]
    }
  }
}

Elegant Menu Toolbar & Content Editor, vue file toolbar menu Plugin/Github