Registry /
web-framework / vue-float-action-button
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueFab
✓ import VueFab from 'vue-float-action-button';
import Vue from 'vue';
Vue.use(VueFab);
✗ const VueFab = require('vue-float-action-button');
The main component is typically registered globally via `Vue.use()`. Options can be passed as a second argument to `Vue.use()`.
FabItem
✓ <vue-fab ...>
<fab-item ... />
</vue-fab>
✗ import { FabItem } from 'vue-float-action-button';
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 <vue-fab> component template.
VueFabOptions
✓ import VueFab from 'vue-float-action-button';
Vue.use(VueFab, { iconType: 'MaterialDesign' });
Configuration options like `iconType` are passed directly to `Vue.use()` during plugin installation, not as component props.
This quickstart initializes a Vue 3 application with `vue-float-action-button`, demonstrating how to register the plugin, use the main `<vue-fab>` component, and define sub-items using `<fab-item>`. It also includes the necessary external CSS import for Material Icons.
import { createApp, h } from 'vue';
import VueFab from 'vue-float-action-button';
// Root Vue component for the example
const App = {
template: `
<div id="app" style="height: 200vh; padding: 20px;">
<h1>Vue Floating Action Button Demo</h1>
<p>Scroll down to see the button behavior.</p>
<div style="height: 80vh;"></div>
<vue-fab
:mainBtnColor="mainBtnColor"
@clickItem="clickItem"
>
<fab-item
v-for="(item, idx) in menu"
:key="idx"
:idx="idx"
:title="item.title"
:color="item.color"
:icon="item.icon"
/>
</vue-fab>
<div style="height: 80vh;"></div>
</div>
`,
data() {
return {
mainBtnColor: '#3599DB',
menu: [
{ icon: 'add', title: 'Add Item', color: '#f44336' },
{ icon: 'https', title: 'Secure Link', color: '#2196f3' },
{ icon: 'edit', title: 'Edit Content', color: '#ff9800' }
]
};
},
methods: {
clickItem(item) {
console.log('Clicked item:', item.idx, item.title);
alert(`Clicked on: ${item.title}`);
}
}
};
// Mount the Vue application
const app = createApp(App);
app.use(VueFab, { iconType: 'MaterialDesign' });
app.mount('#app');
// Ensure Material Icons are loaded for 'MaterialDesign' iconType
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
document.head.appendChild(link);
Errors
Common errors & fixes
Failed to resolve component: vue-fab
The `vue-float-action-button` plugin has not been correctly registered with Vue, or the component is not globally available.
fixEnsure 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.
Material Icons are not displaying or appear as text strings (e.g., 'add', 'edit')
The external CSS stylesheet for Material Icons is missing from your project's `index.html` or equivalent.
fixAdd `<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">` to the `<head>` section of your `index.html`.
Cannot read properties of undefined (reading 'use') when trying to register the plugin
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()`.
fixEnsure `import Vue from 'vue';` is present at the top of your file where you are calling `Vue.use(VueFab);`.
Audit
Dependencies
No dependency data recorded yet.