{"id":14280,"library":"vue-float-action-button","title":"Vue Floating Action Button Component","description":"Vue Floating Action Button (vue-float-action-button) is a lightweight (5.8KB min+gzip) and zero-dependency Vue.js component that provides a customizable floating action button, complete with sub-items. Currently at version 0.7.9, it offers a robust solution for adding Material Design-inspired action buttons to Vue applications. While an explicit release cadence isn't defined, the version number suggests active development towards a 1.0 release. Key differentiators include support for multiple animation types, automatic show/hide based on scrolling or gestures, seamless integration with both Google Material Icons and Alibaba Iconfont.cn, and the ability to hide upon clicking outside the button area, all while maintaining smooth, native-like Material Design animations.","status":"active","version":"0.7.9","language":"javascript","source_language":"en","source_url":"https://github.com/a62527776a/vue-floating-action-button","tags":["javascript","vue","floating action button"],"install":[{"cmd":"npm install vue-float-action-button","lang":"bash","label":"npm"},{"cmd":"yarn add vue-float-action-button","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-float-action-button","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main component is typically registered globally via `Vue.use()`. Options can be passed as a second argument to `Vue.use()`.","wrong":"const VueFab = require('vue-float-action-button');","symbol":"VueFab","correct":"import VueFab from 'vue-float-action-button';\nimport Vue from 'vue';\n\nVue.use(VueFab);"},{"note":"FabItem is a sub-component of VueFab and does not need to be explicitly imported or registered if VueFab is registered globally. It is used directly within the component template.","wrong":"import { FabItem } from 'vue-float-action-button';","symbol":"FabItem","correct":"\n \n"},{"note":"Configuration options like `iconType` are passed directly to `Vue.use()` during plugin installation, not as component props.","symbol":"VueFabOptions","correct":"import VueFab from 'vue-float-action-button';\nVue.use(VueFab, { iconType: 'MaterialDesign' });"}],"quickstart":{"code":"import { createApp, h } from 'vue';\nimport VueFab from 'vue-float-action-button';\n\n// Root Vue component for the example\nconst App = {\n template: `\n
\n

Vue Floating Action Button Demo

\n

Scroll down to see the button behavior.

\n
\n \n \n \n
\n
\n `,\n data() {\n return {\n mainBtnColor: '#3599DB',\n menu: [\n { icon: 'add', title: 'Add Item', color: '#f44336' },\n { icon: 'https', title: 'Secure Link', color: '#2196f3' },\n { icon: 'edit', title: 'Edit Content', color: '#ff9800' }\n ]\n };\n },\n methods: {\n clickItem(item) {\n console.log('Clicked item:', item.idx, item.title);\n alert(`Clicked on: ${item.title}`);\n }\n }\n};\n\n// Mount the Vue application\nconst app = createApp(App);\napp.use(VueFab, { iconType: 'MaterialDesign' });\napp.mount('#app');\n\n// Ensure Material Icons are loaded for 'MaterialDesign' iconType\nconst link = document.createElement('link');\nlink.rel = 'stylesheet';\nlink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';\ndocument.head.appendChild(link);","lang":"javascript","description":"This quickstart initializes a Vue 3 application with `vue-float-action-button`, demonstrating how to register the plugin, use the main `` component, and define sub-items using ``. It also includes the necessary external CSS import for Material Icons."},"warnings":[{"fix":"Add `` to your `index.html` file.","message":"When using `iconType: 'MaterialDesign'`, you must manually include the Google Material Icons stylesheet in your `index.html` or main entry point. Icons will not render correctly without it.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Review the GitHub repository and release notes for any breaking changes when upgrading to new versions.","message":"The package version is currently below 1.0 (0.7.9). While functional, this indicates that the API might still undergo breaking changes in future minor or patch releases before a stable 1.0 version is released.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure configuration is done during plugin installation: `Vue.use(VueFab, { iconType: 'MaterialDesign' });`","message":"To configure the icon type (Material Design or Iconfont), you must pass an options object to `Vue.use()` when installing the plugin. Changing `iconType` as a prop on the component itself will not work.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.7.9':43 '1.0':76 '5.8':18 'abil':105 'action':3,8,13,33,55,127 'activ':72 'ad':50 'alibaba':101 'anim':84,123 'applic':59 'area':113 'automat':86 'base':88 'button':4,9,14,34,56,112,128 'cadenc':64 'click':109 'complet':35 'compon':5,27 'current':40 'customiz':31 'defin':67 'depend':25 'design':53,122 'design-inspir':52 'develop':73 'differenti':79 'explicit':62 'float':2,7,12,32,126 'gestur':92 'googl':97 'gzip':21 'hide':107 'icon':99 'iconfont.cn':102 'includ':80 'inspir':54 'integr':94 'isn':65 'item':39 'javascript':124 'kb':19 'key':78 'lightweight':17 'like':120 'maintain':116 'materi':51,98,121 'min':20 'multipl':83 'nativ':119 'native-lik':118 'number':70 'offer':45 'outsid':110 'provid':29 'releas':63,77 'robust':47 'scroll':90 'seamless':93 'show/hide':87 'smooth':117 'solut':48 'sub':38 'sub-item':37 'suggest':71 'support':81 'toward':74 'type':85 'upon':108 'version':42,69 'vue':1,6,11,58,125 'vue-float-action-button':10 'vue.js':26 'zero':24 'zero-depend':23","created_at":"2026-04-20T01:58:53.361643+00:00","updated_at":"2026-04-20T01:58:53.361643+00:00","problems":[{"fix":"Ensure you have called `app.use(VueFab)` (for Vue 3) or `Vue.use(VueFab)` (for Vue 2) in your application's entry file before mounting your root component.","cause":"The `vue-float-action-button` plugin has not been correctly registered with Vue, or the component is not globally available.","error":"Failed to resolve component: vue-fab"},{"fix":"Add `` to the `` section of your `index.html`.","cause":"The external CSS stylesheet for Material Icons is missing from your project's `index.html` or equivalent.","error":"Material Icons are not displaying or appear as text strings (e.g., 'add', 'edit')"},{"fix":"Ensure `import Vue from 'vue';` is present at the top of your file where you are calling `Vue.use(VueFab);`.","cause":"This error typically occurs in Vue 2 projects if `Vue` (the global Vue object) is not properly imported or available when attempting to call `Vue.use()`.","error":"Cannot read properties of undefined (reading 'use') when trying to register the plugin"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/a62527776a/vue-floating-action-button","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-float-action-button","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}