Search results

Getting started with Vue FloatingActionButton component

08 Feb 2023 / 3 minutes to read

This section explains how to create a simple Floating Action Button and demonstrate the basic usage of the Floating Action Button component in an Vue environment.

Prerequisites

System requirements for Syncfusion Vue UI components

Dependencies

The list of dependencies required to use the Floating Action Button component in your application is given as follows:

Copied to clipboard
|-- @syncfusion/ej2-vue-buttons
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-vue-base

Installation and Configuration

You can use Vue CLI to setup your Vue applications. To install Vue CLI use the following command.

Copied to clipboard
npm install -g @vue/cli

npm install -g @vue/cli-init

Start a new project using below Vue CLI command.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart

npm install

Install Syncfusion Floating Action Button packages using below command.

Copied to clipboard
npm install @syncfusion/ej2-vue-buttons --save

Registering Floating Action Button Component using Vue.use()

Import the Floating Action Button Plugin from the Essential JS 2 Vue package and register the same using Vue.use() with Component Plugin as its argument.

Refer to the code snippet given below.

Copied to clipboard
import Vue from 'vue';
import { FabPlugin  } from "@syncfusion/ej2-vue-buttons";

Vue.use(FabPlugin );

export default {}

By registering component plugin in Vue, all child directives are also globally registered. We can also use Vue.Component() to register Floating Action Button. Refer here to know more about component registration.

Initialize Floating Action Button

Add the EJ2 Vue Floating Action Button using <ejs-fab> to the <template> section of the App.vue file in src directory.

Copied to clipboard
<template>
    <ejs-fab id='fab'></ejs-fab>
</template>

<script>
    import Vue from 'vue';
    import { FabPlugin } from "@syncfusion/ej2-vue-buttons";

    Vue.use(FabPlugin);

    export default {}
</script>

Adding CSS reference

Add Floating Action Button component’s styles as given below in <style> section of the App.vue file.

Copied to clipboard
<style>
    @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Run the application

Now run the npm run dev command in the console, it will build your application and open in the browser.

The following example shows a basic Floating Action Button component.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' content='Add' target='#targetElement'></ejs-fab>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
    import { enableRipple } from '@syncfusion/ej2-base';

    enableRipple(true);
    Vue.use(FabPlugin);

    export default {}
</script>

<style>
    @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Click event

The floating action button control triggers the onclick event when you click on the floating action button. You can use this event to perform the required action.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <!-- To render Floating Action Button -->
        <ejs-fab id='fab' iconCss='e-icons e-edit' content='Edit' v-on:click.native="onClick" target='#targetElement'>
        </ejs-fab>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { FabPlugin } from "@syncfusion/ej2-vue-buttons";
    import { enableRipple } from '@syncfusion/ej2-base';

    enableRipple(true);
    Vue.use(FabPlugin);

    export default {
        methods: {
            onClick: function () {
                alert("Edit is clicked!");
            }
        }
    }

</script>

<style>
    @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>