Velzon Laravel Admin Dashboard Template

https://themesbrand.com/velzon/docs/laravel
Admin
Velzon is a premium, fully responsive admin dashboard template built with Bootstrap 5.3.6 and...
Tokens:71,897
Snippets:532
Trust Score:9.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://themesbrand.com/velzon/docs/laravel/getting-started

Installs all required project dependencies using either yarn or composer. Ensure you have Node.js and Composer installed.

```bash
yarn install
composer install
```

--------------------------------

### Install Multi JS Package

Source: https://themesbrand.com/velzon/docs/laravel/multi-js

This command installs the Multi JS package using npm. It's a prerequisite for using the multi-select functionality.

```bash
npm i multi.js --save
```

--------------------------------

### Install Passport and Generate Keys

Source: https://themesbrand.com/velzon/docs/laravel/laravel-passport

Installs Passport and generates the necessary encryption keys for secure access token generation. It also creates default clients for personal access and password grants.

```bash
php artisan passport:install
```

--------------------------------

### Grid.js Search Example

Source: https://themesbrand.com/velzon/docs/laravel/gridjs

Demonstrates Grid.js table setup with the search functionality enabled, allowing users to filter data dynamically. It includes pagination and renders into an element with the ID 'table-search'.

```javascript
new gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company", "Country"],
    pagination: {
        limit: 5
    },
    search: true,
    data: [
        ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
        "Hauck Inc", "Holy See"],
        ["Harold", "harold@example.com", "Forward Creative Coordinator",
         "Metz Inc", "Iran"],

```

--------------------------------

### Start Development Server

Source: https://themesbrand.com/velzon/docs/laravel/getting-started

Starts the local development server for the Laravel application. The default address is http://localhost:8000, but a custom port can be specified.

```bash
php artisan serve
php artisan serve --port=8001
```

--------------------------------

### Default Choices Select Example

Source: https://themesbrand.com/velzon/docs/laravel/choices

Demonstrates a basic implementation of Choices.js for a single select dropdown. It includes a placeholder option and standard choices. No external JavaScript is required for this basic setup, as the `data-choices` attribute initializes the component.

```html
<select class="form-control" data-choices name="choices-single-default">
    <option value="">This is a placeholder</option>
    <option value="Choice 1">...</option>
    <option value="Choice 2">...</option>
</select>
```

--------------------------------

### Install and Uninstall Prismjs Package

Source: https://themesbrand.com/velzon/docs/laravel/prismjs-highlight

These commands demonstrate how to add and remove the Prismjs package using npm. You can install it as a project dependency or remove it if no longer needed.

```bash
npm i rater-js --save
```

```bash
npm unistall prismjs or you can remove package by removing specific package from package.json
```

--------------------------------

### Install Glightbox Package

Source: https://themesbrand.com/velzon/docs/laravel/glightbox

This command installs the Glightbox package using npm, a package manager for Node.js. This is a prerequisite for using Glightbox in your project.

```bash
npm i glightbox --save

```

--------------------------------

### Install Autocomplete Package

Source: https://themesbrand.com/velzon/docs/laravel/autocomplete

This command installs the Autocomplete JavaScript library as a project dependency using npm. It's the recommended way to add the package to your project.

```bash
npm i @tarekraafat/autocomplete.js --save

```

--------------------------------

### SweetAlert Community Join Example in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

A SweetAlert example designed to encourage community joining, featuring a title, input field for email, an image, and a footer with a sign-in link. This requires the SweetAlert library and is initiated by a button click.

```javascript
document.getElementById("custom-sa-community").addEventListener("click", function() {
    Swal.fire({
        title: 'Join Our Community',
        html: 'You can use bold text, ' + 'links ' + 'and other HTML tags',
        html: '' + 'Email' + '' + '',
        imageUrl: 'build/images/logo-sm.png',
        footer: 'Already have an account ?  Signin  ',
        imageHeight: 40,
        confirmButtonClass: 'btn btn-primary w-xs mb-2',
        confirmButtonText: 'Register ',
        buttonsStyling: false,
        showCloseButton: true
    })
});
```

--------------------------------

### Install Grid.js Package

Source: https://themesbrand.com/velzon/docs/laravel/gridjs

This command installs the Grid.js package using npm. It adds Grid.js as a dependency to your project, allowing you to use its features.

```bash
npm i gridjs --save

```

--------------------------------

### Wizard Component Example Implementation (JavaScript)

Source: https://themesbrand.com/velzon/docs/laravel/wizard

This JavaScript code provides a comprehensive example of how to implement and manage a multi-step wizard form. It includes functionality for image previews, navigating between steps, and updating progress bars.

```javascript
document.querySelector("#profile-img-file-input").addEventListener("change", function () {
    var preview = document.querySelector(".user-profile-image");
    var file = document.querySelector(".profile-img-file-input").files[0];
    var reader = new FileReader();

    reader.addEventListener(
        "load",
        function () {
            preview.src = reader.result;
        },
        false
    );

    if (file) {
        reader.readAsDataURL(file);
    }
});

document.querySelectorAll(".form-steps").forEach(function (form) {

    // next tab
    form.querySelectorAll(".nexttab").forEach(function (nextButton) {
        console.log("nextButton");
        var tabEl = form.querySelectorAll('button[data-bs-toggle="pill"]');
        tabEl.forEach(function (item) {
            item.addEventListener('show.bs.tab', function (event) {
                event.target.classList.add('done');
            });
        });
        nextButton.addEventListener("click", function () {
            var nextTab = nextButton.getAttribute('data-nexttab');
            document.getElementById(nextTab).click();
        });
    });

    //Pervies tab
    form.querySelectorAll(".previestab").forEach(function (prevButton) {

        prevButton.addEventListener("click", function () {
            console.log("prevButton", prevButton);
            var prevTab = prevButton.getAttribute('data-previous');
            var totalDone = prevButton.closest("form").querySelectorAll(".custom-nav .done").length;
            for (var i = totalDone - 1; i < totalDone; i++) {
                (prevButton.closest("form").querySelectorAll(".custom-nav .done")[i]) ? prevButton.closest("form")
                .querySelectorAll(".custom-nav .done")[i].classList.remove('done') : '';
            }
            document.getElementById(prevTab).click();
        });
    });

    // Step number click
    var tabButtons = form.querySelectorAll('button[data-bs-toggle="pill"]');
    tabButtons.forEach(function (button, i) {
        button.setAttribute("data-position", i);
        button.addEventListener("click", function () {
            var getProgreebar = button.getAttribute("data-progressbar");
            if (getProgreebar) {
                var totallength = document.getElementById("custom-progress-bar").querySelectorAll("li").length - 1;
                var current = i;
                var percent = (current / totallength) * 100;
                document.getElementById("custom-progress-bar").querySelector('.progress-bar').style.width = percent + "%ிகளைக்";
        }
      ]
    }
  ]
}
```
```

--------------------------------

### Install Spatie Laravel Permission Package

Source: https://themesbrand.com/velzon/docs/laravel/laravel-acl

Installs the spatie/laravel-permission package using Composer and configures the service provider in app.php.

```bash
composer require spatie/laravel-permission
```

```php
'providers' => [
// ...
    Spatie\Permission\PermissionServiceProvider::class,
];
```

--------------------------------

### Install and Manage Shepherd.js Package

Source: https://themesbrand.com/velzon/docs/laravel/shepherdjs-tour

Instructions for adding and removing the Shepherd.js library using npm. This is essential for integrating the tour functionality into your project.

```bash
npm i shepherd.js --save

npm unistall shepherd.js or you can remove package by removing/clearing specific package from package.json
```

--------------------------------

### Install Flatpickr using npm

Source: https://themesbrand.com/velzon/docs/laravel/flatpickr

This command installs the Flatpickr library as a project dependency using npm. This is the standard way to manage frontend packages in modern JavaScript projects.

```bash
npm i flatpickr --save
```

--------------------------------

### Install SortableJS using npm

Source: https://themesbrand.com/velzon/docs/laravel/sortablejs

Instructions for adding the SortableJS library to your project using npm. This is a common method for managing front-end dependencies.

```bash
npm i sortablejs --save
```

--------------------------------

### SweetAlert Email Verification Example in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

Demonstrates a SweetAlert for email verification, informing the user that a verification email has been sent. This example includes a button to resend the email and requires the SweetAlert library.

```javascript
document.getElementById("custom-sa-email-verify").addEventListener("click", function() {
    Swal.fire({
        html: '' + '' + '' + '' + '' + '' + '' + 'Verify Your Email' + 'We have sent you verification email example@abc.com,  Please check it.' + '' + '',
        showCancelButton: false,
        confirmButtonClass: 'btn btn-primary mb-1',
        confirmButtonText: 'Verify Email',
        buttonsStyling: false,
        footer: 'Didn\'t receive an email ? Resend',
        showCloseButton: true
    })
});
```

--------------------------------

### Initialize Basic Datatable in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/datatables

This snippet shows the basic initialization of a Datatable on an HTML element with the ID 'example'. It requires the Datatables library to be included in the project. The output is a fully functional, searchable, and sortable table.

```javascript
document.addEventListener('DOMContentLoaded', function () {
    let table = new DataTable('#example');
});
```

--------------------------------

### Install Color Pickr with NPM

Source: https://themesbrand.com/velzon/docs/laravel/colorpicker

Instructions for adding the Color Pickr library to your project using NPM. This is the recommended method for managing dependencies.

```bash
npm i @simonwep/pickr --save
```

--------------------------------

### SweetAlert Notification Message Example in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

Presents a notification SweetAlert, welcoming the user and informing them of new notifications. This example is triggered by a button click and relies on the SweetAlert library.

```javascript
document.getElementById("custom-sa-notification").addEventListener("click", function() {
    Swal.fire({
        html: '' + '' + '' + '' + '' + 'Welcome Mike Mayer' + 'You have 2 Notifications' + '' + '',
        showCancelButton: false,
        confirmButtonClass: 'btn btn-primary mb-1',
        confirmButtonText: 'Show Me ',
        buttonsStyling: false,
        showCloseButton: true
    })
});
```

--------------------------------

### Install Simplebar JavaScript Library

Source: https://themesbrand.com/velzon/docs/laravel/simplebar

Instructions for installing the Simplebar JavaScript library, which replaces default browser scrollbars with custom CSS-styled ones. This includes adding the script to your project and managing the package via npm.

```html
<!-- simplebarjs -->
<script src="{{ URL::asset('build/libs/simplebar/simplebar.min.js') }}"></script>
```

```bash
npm i simplebar --save
```

```bash
npm unistall simplebar or you can remove package by removing specific package from package.json
```

--------------------------------

### Install Bootstrap UI Package with npm

Source: https://themesbrand.com/velzon/docs/laravel/bootstrap-ui

This snippet shows how to install the Bootstrap UI package using npm, a common package manager for JavaScript. Ensure Node.js and npm are installed on your system before running this command.

```bash
npm i bootstrap
```

--------------------------------

### Grid.js Base Example with Actions

Source: https://themesbrand.com/velzon/docs/laravel/gridjs

Demonstrates a basic Grid.js table with custom column formatters for ID and Actions, including pagination, sorting, and searching capabilities. It requires the Grid.js library and a target HTML element with the ID 'table-gridjs'.

```javascript
new gridjs.Grid({
    columns: [
        {
            name: 'ID',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Name", 
        {
            name: 'Email',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Position", "Company", "Country",
        {
            name: 'Actions',
            width: '120px',
            formatter: (function (cell) {
                return gridjs.html("" +
                "Details" +
                "");
            })
        },
    ],
    pagination: {
        limit: 5
    },
    sort: true,
    search: true,
    data: [
        ["01", "Jonathan", "jonathan@example.com","Senior Implementation Architect", 
        "Hauck Inc", "Holy See"],
        ["02", "Harold", "harold@example.com", "Forward Creative Coordinator",
        "Metz Inc", "Iran"],
        ["03", "Shannon", "shannon@example.com","Legacy Functionality Associate",
            "Zemlak Group", "South Georgia"],
        ["04", "Robert", "robert@example.com","Product Accounts Technician",
            "Hoeger", "San Marino"],
        ["05", "Noel", "noel@example.com","Customer Data Director",
            "Howell - Rippin", "Germany"],
        ["06", "Traci", "traci@example.com","Corporate Identity Director",
            "Koelpin - Goldner", "Vanuatu"],
        ["07", "Kerry", "kerry@example.com","Lead Applications Associate",
            "Feeney, Langworth and Tremblay", "Niger"],
        ["08", "Patsy", "patsy@example.com","Dynamic Assurance Director",
            "Streich Group", "Niue"],
        ["09", "Cathy", "cathy@example.com","Customer Data Director",
            "Ebert, Schamberger and Johnston", "Mexico"],
        ["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison",
            "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-gridjs"));

```

--------------------------------

### Install Filepond using npm

Source: https://themesbrand.com/velzon/docs/laravel/filepond

This command demonstrates how to add Filepond to your project using npm, the Node Package Manager. This is the standard way to include Filepond and manage its dependencies in a modern JavaScript development workflow.

```bash
npm i filepond --save
```

--------------------------------

### Install noUiSlider via npm

Source: https://themesbrand.com/velzon/docs/laravel/nouislider

This command installs the noUiSlider package using npm, adding it as a dependency to your project. This is the standard method for managing front-end packages.

```bash
npm i nouislider --save

```

--------------------------------

### Install List.js using npm

Source: https://themesbrand.com/velzon/docs/laravel/listjs

This snippet shows the command to add List.js as a dependency to your project using npm. This is the standard way to manage front-end packages in modern JavaScript development.

```bash
npm i list.js --save
```

--------------------------------

### Initialize Color Pickr with Custom JS

Source: https://themesbrand.com/velzon/docs/laravel/colorpicker

Includes the Javascript file responsible for initializing the Color Pickr component. This file typically contains the configuration and setup for the color picker.

```html
<!--  color pickr init js -->
<script src="{{ URL::asset('build/js/pages/form-pickers.init.js') }}"></script>
```

--------------------------------

### Generate Application Key

Source: https://themesbrand.com/velzon/docs/laravel/getting-started

Generates a new application key for Laravel. This command is essential for security and should be run after installing dependencies.

```bash
php artisan key:generate
```

--------------------------------

### SweetAlert Success Message Example in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

Displays a success SweetAlert message with a 'Well done!' title and a confirmation message. This example requires the SweetAlert library and is triggered by a button click.

```javascript
document.getElementById("custom-sa-success").addEventListener("click", function() {
    Swal.fire({
        html: '' + '' + '' + 'Well done !' + 'Aww yeah, you successfully read this important message.' + '' + '',
        showCancelButton: true,
        showConfirmButton: false,
        cancelButtonClass: 'btn btn-primary w-xs mb-1',
        cancelButtonText: 'Back',
        buttonsStyling: false,
        showCloseButton: true
    })
});
```

--------------------------------

### Install and Initialize Cleave.js for Input Masking

Source: https://themesbrand.com/velzon/docs/laravel/input-mask

This snippet covers the installation of Cleave.js via npm and the inclusion of its JavaScript files for input formatting. It also shows how to initialize the library with custom JavaScript for various masking functionalities.

```html
<!-- cleave.js -->
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
```

```javascript
// form masks init
<script src="{{ URL::asset('build/js/pages/form-masks.init.js') }}"></script>
```

```bash
npm i cleave.js --save
```

```bash
npm unistall cleave.js or you can remove package by removing specific package from package.json
```

--------------------------------

### Grid.js Pagination Example

Source: https://themesbrand.com/velzon/docs/laravel/gridjs

Illustrates Grid.js table configuration focused on pagination, with a fixed limit of 5 rows per page. It includes custom formatters for the ID and Actions columns and renders into an element with the ID 'table-pagination'.

```javascript
new gridjs.Grid({
    columns: [{
        name: 'ID',
        width: '120px',
        formatter: (function (cell) {
            return gridjs.html('' + cell + '');
        })
    },"Name", "Date", "Total", "Status",
    {
        name: 'Actions',
        width: '100px',
        formatter: (function (cell) {
            return gridjs.html("" +
            "Details" +
          "");
        })
    },
],
    pagination: {
        limit: 5
    },

    data: [
        ["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid",],
        ["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
        ["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
        ["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
        ["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
        ["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
        ["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
        ["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
        ["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
        ["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
    ]
}).render(document.getElementById("table-pagination"));

```

--------------------------------

### Initialize ApexCharts Bar Charts with Custom JS

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This snippet includes the custom JavaScript file for initializing and rendering ApexCharts bar charts. This file contains the logic and configurations for various bar chart examples.

```html
<!-- barcharts init -->
<script src="build/js/pages/apexcharts-bar.init.js"></script>
```

--------------------------------

### Initialize Colorpickr with Monolith Theme in JavaScript

Source: https://themesbrand.com/velzon/docs/laravel/colorpicker

Shows how to set up Colorpickr using the 'monolith' theme. This example customizes the default color, includes swatches, and specifies interaction options, disabling hex, rgba, and hsva inputs while enabling clear and save.

```javascript
var monolithColorPickr = document.querySelectorAll(".monolith-colorpicker");
monolithColorPickr.forEach(function () {
Pickr.create({
    el: ".monolith-colorpicker",
    theme: "monolith",
    default: "#0ab39c",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    defaultRepresentation: "HEXA",
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            hex: false,
            rgba: false,
            hsva: false,
            input: true,
            clear: true,
            save: true,
        },
    },
});
});

```

--------------------------------

### Include ApexCharts Javascript Files for Line Charts

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This snippet shows how to include the necessary ApexCharts JavaScript files and sample data for rendering line charts. It assumes the ApexCharts library is already installed.

```html
<!-- apexcharts -->
<script src="build/libs/apexcharts/apexcharts.min.js"></script>
<script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
```

--------------------------------

### Eloquent Queries for Roles and Permissions

Source: https://themesbrand.com/velzon/docs/laravel/laravel-acl

Demonstrates basic Eloquent model interactions for retrieving users, roles, and their associated permissions. These examples assume User, Role, and Permission models are set up and related.

```php
$all_users_with_all_their_roles = User::with('roles')->get();
$all_users_with_all_direct_permissions = User::with('permissions')->get();
$all_roles_in_database = Role::all()->pluck('name');
$users_without_any_roles = User::doesntHave('roles')->get();
$all_roles_except_a_and_b = Role::whereNotIn('name', ['role A', 'role B'])->get();
```

--------------------------------

### Include Shepherd.js CSS and JavaScript for Tours

Source: https://themesbrand.com/velzon/docs/laravel/shepherdjs-tour

This snippet shows how to include the necessary CSS and JavaScript files for Shepherd.js, a library used for guiding users through application tours. It also includes instructions for initializing a custom tour script.

```html
<!-- shepherd.js css -->
<link rel="stylesheet" href="{{ URL::asset('build/libs/shepherd.js/css/shepherd.css') }}">

<!-- shepherd js -->
<script src="{{ URL::asset('build/libs/shepherd.js/js/shepherd.min.js') }}"></script>

<!-- tour init -->
<script src="{{ URL::asset('build/js/pages/tour.init.js') }}"></script>
```

--------------------------------

### Initialize a User Tour with Shepherd.js

Source: https://themesbrand.com/velzon/docs/laravel/shepherdjs-tour

This JavaScript code demonstrates how to create and configure a user tour using the Shepherd.js library. It includes options for step styling, modal overlays, and defining individual tour steps with navigation buttons.

```javascript
var tour = new Shepherd.Tour({
    defaultStepOptions: {
        cancelIcon: {
            enabled: true
        },
        
        classes: 'shadow-md bg-purple-dark',
        scrollTo: { behavior: 'smooth', block: 'center' }
    },

    useModalOverlay:{
        enabled: true
    },
});

tour.addStep({
    title: 'Welcome Back !',
    text: 'This is Step 1',
    attachTo: {
        element: '#logo-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 1

tour.addStep({
    title: 'Register your account',
    text: 'Get your Free Velzon account now.',
    attachTo: {
        element: '#register-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 2

tour.addStep({
    title: 'Login your account',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#login-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 3

tour.addStep({
    title: 'Get yout Product',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#getproduct-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Next',
            classes: 'btn btn-success',
            action: tour.next
        }
    ]
});
// end step 4

tour.addStep({
    title: 'Thank you !',
    text: 'Sign in to continue to Velzon.',
    attachTo: {
        element: '#thankyou-tour',
        on: 'bottom'
    },
    buttons: [
        {
            text: 'Back',
            classes: 'btn btn-light',
            action: tour.back
        },
        {
            text: 'Thank you !',
            classes: 'btn btn-primary',
            action: tour.complete
        }
    ]
});
// end step 5

tour.start();
```

--------------------------------

### Configure Colorpickr with Minimal Options in JavaScript

Source: https://themesbrand.com/velzon/docs/laravel/colorpicker

A simplified Colorpickr setup using the 'monolith' theme, focusing on essential features. This example includes a default color and enables only the preview, clear, and save components, suitable for basic color selection needs.

```javascript
var demoColorPickr = document.querySelectorAll(".colorpicker-demo");
demoColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-demo",
    theme: "monolith",
    default: "#405189",
    components: {
        // Main components
        preview: true,
        // Input / output Options
        interaction: {
            clear: true,
            save: true,
        },
    },
});
}); 

```

--------------------------------

### Create Interactive Choropleth Map with Leaflet (JavaScript)

Source: https://themesbrand.com/velzon/docs/laravel/leaflet

This example demonstrates creating an interactive choropleth map using Leaflet and GeoJSON data. It defines functions to get colors based on data values and style features, then adds the GeoJSON layer to the map. Requires Leaflet, GeoJSON data, and Mapbox access token.

```javascript
var interactivemap = L.map('leaflet-map-interactive-map').setView([37.8, -96], 4);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.
    eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data © OpenStreetMap contributors, ' + 
        'CC-BY-SA, ' + 
        'Imagery © Mapbox',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
}).addTo(interactivemap);

// get color depending on population density value
function getColor(d) {
    return d > 1000 ? '#405189' :
            d > 500  ? '#516194' :
            d > 200  ? '#63719E' :
            d > 100  ? '#7480A9' :
            d > 50   ? '#8590B4' :
            d > 20   ? '#97A0BF' :
            d > 10   ? '#A8B0C9' :
                        '#A8B0C9';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.density)
    };
}

var geojson = L.geoJson(statesData, {
    style: style,
}).addTo(interactivemap);
```

--------------------------------

### Install Laravel Passport Package

Source: https://themesbrand.com/velzon/docs/laravel/laravel-passport

Installs the Laravel Passport package using Composer. This is the first step to integrate OAuth2 authentication into your Laravel application.

```bash
composer require laravel/passport
```

--------------------------------

### Display Title and Text with SweetAlert (JavaScript)

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

This example demonstrates how to create a SweetAlert modal that includes both a title and descriptive text. It's triggered by a button click and uses the 'question' icon to indicate a query. Dependencies include the SweetAlert library.

```javascript
document.getElementById("sa-title").addEventListener("click", function() {
    Swal.fire(
            {
                title: "The Internet?",
                text: 'That thing is still around?',
                icon: 'question',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false,
                showCloseButton: true
            }
    )
});
```

--------------------------------

### Initialize Gallery Page JavaScript

Source: https://themesbrand.com/velzon/docs/laravel/glightbox

This snippet shows how to include the custom JavaScript file responsible for initializing the gallery features, including Glightbox, on your page.

```html
<!-- gallary init -->
<script src="{{ URL::asset('build/js/pages/gallery.init.js') }}"></script>

```

--------------------------------

### Run Database Migrations

Source: https://themesbrand.com/velzon/docs/laravel/getting-started

Executes all pending database migrations to set up the necessary tables for the application. This command requires a properly configured database connection in the .env file.

```bash
php artisan migrate
```

--------------------------------

### Install gmaps Package (NPM)

Source: https://themesbrand.com/velzon/docs/laravel/google-maps

This command installs the gmaps package as a project dependency using npm. This is the standard way to add client-side libraries to your project for use with JavaScript.

```bash
npm i gmaps --save
```

--------------------------------

### Install Leaflet using npm

Source: https://themesbrand.com/velzon/docs/laravel/leaflet

This command installs the Leaflet JavaScript library as a project dependency using npm. It adds Leaflet to your `node_modules` directory and updates `package.json`.

```bash
npm i leaflet --save
```

--------------------------------

### Initialize List.js with Custom JavaScript

Source: https://themesbrand.com/velzon/docs/laravel/listjs

This snippet demonstrates how to include a custom JavaScript file for initializing List.js functionalities. This file typically contains the specific configurations and instantiation of List.js for your application's needs.

```html
<!-- listjs init -->
<script src="{{ URL::asset('build/js/pages/listjs.init.js') }}"></script>
```

--------------------------------

### Configure Colorpickr with Swatches and Input (Monolith Theme)

Source: https://themesbrand.com/velzon/docs/laravel/colorpicker

This example shows how to initialize Colorpickr with the 'monolith' theme, including a predefined set of swatches and enabling input for color values. It also features preview, opacity, and hue controls, along with clear and save actions.

```javascript
var swatcherColorPickr = document.querySelectorAll(".colorpicker-swatches");
swatcherColorPickr.forEach(function () {
Pickr.create({
    el: ".colorpicker-swatches",
    theme: "monolith",
    default: "#3577f1",
    swatches: [
        "rgba(244, 67, 54, 1)",
        "rgba(233, 30, 99, 0.95)",
        "rgba(156, 39, 176, 0.9)",
        "rgba(103, 58, 183, 0.85)",
        "rgba(63, 81, 181, 0.8)",
        "rgba(33, 150, 243, 0.75)",
        "rgba(3, 169, 244, 0.7)",
    ],
    components: {
        // Main components
        preview: true,
        opacity: true,
        hue: true,

        // Input / output Options
        interaction: {
            clear: true,
            save: true,
        },
    },
});
});



```

--------------------------------

### Initialize Pie Charts

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This script initializes pie charts. It depends on the main ApexCharts library being loaded. This custom JavaScript file contains the configuration and data for rendering pie charts.

```html
<!-- piecharts init -->
<script src="build/js/pages/apexcharts-pie.init.js"></script>

```

--------------------------------

### SweetAlert Warning Message Example in Javascript

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

Implements a warning SweetAlert to confirm user action, specifically asking 'Are you Sure You want to Delete this Account?'. This example requires the SweetAlert library and is triggered by a button click.

```javascript
document.getElementById("custom-sa-warning").addEventListener("click", function() {
    Swal.fire({
        html: '' + '' + '' + 'Are you Sure ?' + 'Are you Sure You want to Delete this Account ?' + '' + '',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
        confirmButtonText: 'Yes, Delete It!',
        cancelButtonClass: 'btn btn-danger w-xs mb-1',
        buttonsStyling: false,
        showCloseButton: true
    })
});
```

--------------------------------

### Install Passport with UUID Client IDs

Source: https://themesbrand.com/velzon/docs/laravel/laravel-passport

Installs Laravel Passport using the `--uuids` option, which configures Passport to use UUIDs as the primary key for the `Client` model instead of auto-incrementing integers. Additional steps for disabling default migrations may be required.

```bash
php artisan passport:install --uuids
```

--------------------------------

### Initialize Heatmap Charts

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This script initializes heatmap charts. It depends on the main ApexCharts library being loaded. This custom JavaScript file contains the configuration and data for rendering heatmap charts.

```html
<!-- heatmapscharts init -->
<script src="build/js/pages/apexcharts-heatmap.init.js"></script>

```

--------------------------------

### HTML Example for Language Translation

Source: https://themesbrand.com/velzon/docs/laravel/multi-language

This example shows how to use the @lang directive in HTML to translate text content within the Velzon Laravel theme. It assumes a 'translation.php' file exists in the 'lang' directory with the corresponding key-value pairs for translation.

```html
<a href="#">@lang('translation.title')</a>
```

--------------------------------

### Initialize ApexCharts Line Charts with Custom JS

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This snippet demonstrates how to include the custom JavaScript file responsible for initializing and rendering ApexCharts line charts. This file typically contains chart configuration and data binding.

```html
<!-- linecharts init -->
<script src="build/js/pages/apexcharts-line.init.js"></script>
```

--------------------------------

### Get Authenticated User API

Source: https://themesbrand.com/velzon/docs/laravel/laravel-passport

Retrieves the details of the currently authenticated user. Requires a valid access token.

```APIDOC
## GET /api/user

### Description
Retrieves the details of the currently authenticated user.

### Method
GET

### Endpoint
/api/user

### Parameters
#### Query Parameters
- **Authorization** (string) - Required - Bearer token for authentication (e.g., `Bearer YOUR_ACCESS_TOKEN`).

### Response
#### Success Response (200)
- Returns a JSON object containing the authenticated user's details.

#### Response Example
```json
{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com",
  "email_verified_at": null,
  "created_at": "2023-10-20T10:00:00.000000Z",
  "updated_at": "2023-10-20T10:00:00.000000Z"
}
```

#### Error Response (401)
- **message** (string) - Indicates unauthorized access or invalid token.

#### Error Response Example
```json
{
  "message": "Unauthenticated."
}
```
```

--------------------------------

### Accessing User Permissions and Roles

Source: https://themesbrand.com/velzon/docs/laravel/laravel-acl

Provides examples of how to retrieve a user's permissions and roles, both directly assigned and inherited.

```php
$permissionNames = $user->getPermissionNames(); // collection of name strings
$permissions = $user->permissions; // collection of permission objects

$permissions = $user->getDirectPermissions();
$permissions = $user->getPermissionsViaRoles();
$permissions = $user->getAllPermissions();

$roles = $user->getRoleNames(); // Returns a collection
```

--------------------------------

### User Registration API

Source: https://themesbrand.com/velzon/docs/laravel/laravel-passport

Allows new users to register by providing their name, email, and password. The password must meet specific complexity requirements.

```APIDOC
## POST /api/register

### Description
Registers a new user with the provided name, email, and password.

### Method
POST

### Endpoint
/api/register

### Parameters
#### Request Body
- **name** (string) - Required - The user's full name.
- **email** (string) - Required - The user's email address. Must be unique.
- **password** (string) - Required - The user's password. Must be at least 8 characters long, include mixed case, letters, numbers, symbols, and not be compromised.

### Request Example
```json
{
  "name": "John Doe",
  "email": "john.doe@example.com",
  "password": "P@sswOrd123"
}
```

### Response
#### Success Response (201)
- **message** (string) - Indicates successful user creation.

#### Response Example
```json
{
  "message": "Successfully created user!"
}
```

#### Error Response (422)
- **message** (string) - Indicates validation errors.
- **errors** (object) - Contains specific validation error messages for each field.

#### Error Response Example
```json
{
  "message": "The given data was invalid.",
  "errors": {
    "email": [
      "The email has already been taken."
    ],
    "password": [
      "The password must be at least 8 characters."
    ]
  }
}
```
```

--------------------------------

### Initialize Select2 with jQuery CDN

Source: https://themesbrand.com/velzon/docs/laravel/select2

This snippet shows how to include the necessary jQuery and Select2 CDN links in an HTML file to enable the Select2 library's functionality. Select2 enhances standard select boxes with search and other advanced features.

```html
<!--jquery cdn-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--select2 cdn-->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
```

--------------------------------

### Initialize Scatter Charts

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This script initializes scatter charts. It depends on the main ApexCharts library being loaded. This custom JavaScript file contains the configuration and data for rendering scatter charts.

```html
<!-- scatter charts init -->
<script src="build/js/pages/apexcharts-scatter.init.js"></script>

```

--------------------------------

### Basic HTML Select Element

Source: https://themesbrand.com/velzon/docs/laravel/select2

A standard HTML select element with several option tags. This serves as a foundational example for dropdown menus.

```html
<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
        <option value="MA">Madrid</option>
        <option value="TO">Toronto</option>
        <option value="LO">Londan</option>
    <option value="WY">Wyoming</option>
</select>
```

--------------------------------

### Install and Uninstall Rater.js using npm

Source: https://themesbrand.com/velzon/docs/laravel/ratings

Instructions for managing the Rater.js package using npm. This includes commands for both adding the package to your project and removing it.

```bash
npm i rater-js --save

npm unistallrater-js or you can remove package by removing specific package from package.json
```

--------------------------------

### Add Quill JS Package using npm

Source: https://themesbrand.com/velzon/docs/laravel/quilljs

Installs the Quill JS package using npm. This command adds the Quill library to your project's dependencies.

```bash
npm i quill --save
```

--------------------------------

### Basic noUiSlider Initialization in JavaScript

Source: https://themesbrand.com/velzon/docs/laravel/nouislider

Initializes a basic noUiSlider on elements with the 'data-rangeslider' attribute. It sets the starting value, connection type, and range limits. Requires the noUiSlider library.

```javascript
var sliderColorScheme = document.querySelectorAll('[data-rangeslider]');

sliderColorScheme.forEach(function (slider) {
    noUiSlider.create(slider, {
        start: 127,
        connect: 'lower',
        range: {
            'min': 0,
            'max': 255
        },
    });
});
```

--------------------------------

### Cleave.js Time Formatting Options

Source: https://themesbrand.com/velzon/docs/laravel/input-mask

Illustrates the use of Cleave.js for formatting time inputs. Examples include full hour-minute-second formatting and a concise hour-minute format.

```javascript
var cleaveTime = new Cleave('#cleave-time', {
    time: true,
    timePattern: ['h', 'm', 's']
});
```

```javascript
var cleaveTimeFormat = new Cleave('#cleave-time-format', {
    time: true,
    timePattern: ['h', 'm']
});
```

--------------------------------

### Initialize Filepond for Profile Picture Selection

Source: https://themesbrand.com/velzon/docs/laravel/filepond

This JavaScript code initializes Filepond for a profile picture upload, featuring a circular crop and preview. It registers essential plugins and configures Filepond with specific options for aspect ratio, resizing, and layout to create a user-friendly profile picture selection interface.

```javascript
FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

FilePond.create(
    document.querySelector('.filepond-input-circle'),
    {
        labelIdle: 'Drag & Drop your picture or Browse',
        imagePreviewHeight: 170,
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: 200,
        imageResizeTargetHeight: 200,
        stylePanelLayout: 'compact circle',
        styleLoadIndicatorPosition: 'center bottom',
        styleProgressIndicatorPosition: 'right bottom',
        styleButtonRemoveItemPosition: 'left bottom',
        styleButtonProcessItemPosition: 'right bottom',
    }
);
```

--------------------------------

### Initialize Filepond for Multiple File Uploads

Source: https://themesbrand.com/velzon/docs/laravel/filepond

This JavaScript code initializes Filepond for multiple file uploads. It registers necessary plugins like file encoding, size validation, EXIF orientation, and image preview, then applies Filepond to all input elements with the class 'filepond-input-multiple'.

```javascript
FilePond.registerPlugin(
    // encodes the file as base64 data
    FilePondPluginFileEncode,
    // validates the size of the file
    FilePondPluginFileValidateSize,
    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,
    // previews dropped images
    FilePondPluginImagePreview
);

var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');

// loop over input elements
Array.from(inputMultipleElements).forEach(function(inputElement) {
    // create a FilePond instance at the input element location
    FilePond.create(inputElement);
})
```

--------------------------------

### Add New Javascript Dependency (Simplebar)

Source: https://themesbrand.com/velzon/docs/laravel/laravel-structure

This section explains how to add a new JavaScript dependency, specifically 'simplebar', to a Laravel project. It covers installation via npm, configuration in `package-copy-config.json`, and building the project.

```bash
npm install simplebar
```

```json
{
"packagesToCopy": [
    "simplebar"
    ]
}
```

```bash
npm run build
```

--------------------------------

### Include Select2 Initialization Script

Source: https://themesbrand.com/velzon/docs/laravel/select2

This snippet demonstrates how to link a custom JavaScript file (`select2.init.js`) responsible for initializing and configuring the Select2 component within the Velzon theme. This script is typically placed after the Select2 library has been loaded.

```html
<script src="build/js/pages/select2.init.js"><
/script>
```

--------------------------------

### Initialize ApexCharts Timeline Charts with Custom JS

Source: https://themesbrand.com/velzon/docs/laravel/apexcharts

This snippet includes the custom JavaScript file for initializing and rendering ApexCharts timeline charts. This file contains the specific configurations and data for timeline visualizations.

```html
<!-- timeline charts init -->
<script src="build/js/pages/apexcharts-timeline.init.js"></script>
```

--------------------------------

### Uninstall gmaps Package (NPM)

Source: https://themesbrand.com/velzon/docs/laravel/google-maps

This command uninstalls the gmaps package from your project using npm. Alternatively, you can manually remove the package entry from your package.json file and then run npm install.

```bash
npm unistall gmaps
```

--------------------------------

### JavaScript: SweetAlert with Custom Width, Padding, and Background

Source: https://themesbrand.com/velzon/docs/laravel/sweetalert2

Configures a SweetAlert with custom dimensions, including width and padding, and a background image. This example demonstrates advanced styling options for alerts.

```javascript
document.getElementById("custom-padding-width-alert").addEventListener("click", function() {
    Swal.fire({
        title: 'Custom width, padding, background.',
        width: 600,
        padding: 100,
        confirmButtonClass: 'btn btn-primary w-xs',
        buttonsStyling: false,
        background: '#fff url(build/images/auth-bg.jpg)'
    })
});
```

--------------------------------

### Initialize DataTables with Custom JS

Source: https://themesbrand.com/velzon/docs/laravel/datatables

This snippet shows how to link a custom Javascript file for initializing DataTables. This file, typically 'datatables.init.js', would contain the specific configurations and settings for your DataTables instances.

```javascript
<script src="build/js/pages/datatables.init.js"></script>
```

--------------------------------

### Include Filepond CSS and JavaScript Files

Source: https://themesbrand.com/velzon/docs/laravel/filepond

This snippet shows how to include the necessary CSS and JavaScript files for Filepond, a versatile file uploading library. It ensures that Filepond and its preview plugin are correctly linked in your project.

```html
<!-- Filepond css -->
<link rel="stylesheet" href="{{ URL::asset('build/libs/filepond/filepond.min.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ URL::asset('build/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css') }}">

<!-- filepond js -->
<script src="{{ URL::asset('build/libs/filepond/filepond.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ URL::asset('build/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
```

--------------------------------

### Swiper with Creative Effect (JavaScript)

Source: https://themesbrand.com/velzon/docs/laravel/swiper-slider

Implements the creative effect for Swiper, allowing for custom 3D transitions. This example configures specific transformations for previous and next slides.

```javascript
var swiper = new Swiper(".effect-creative-swiper", {
    loop: true,
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
        prev: {
        shadow: true,
        translate: [0, 0, -400],
        },
        next: {
        translate: ["100%", 0, 0],
        },
    },
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});
```

--------------------------------

### Cleave.js Date Formatting Options

Source: https://themesbrand.com/velzon/docs/laravel/input-mask

Demonstrates how to use Cleave.js to format date inputs. It provides examples for standard date formats with delimiters and a simplified month-year pattern.

```javascript
var cleaveDate = new Cleave('#cleave-date', {
    date: true,
    delimiter: '-',
    datePattern: ['d', 'm', 'Y']
});
```

```javascript
var cleaveDateFormat = new Cleave('#cleave-date-format', {
    date: true,
    datePattern: ['m', 'y']
});
```

--------------------------------

### Apply Pre-built Layouts in Laravel Master File

Source: https://themesbrand.com/velzon/docs/laravel/horizontal

To utilize pre-built layout variations, copy the content of `resources/views/layouts/master-layouts.blade.php` into your `resources/views/layouts/master.blade.php` file. This allows for easy integration of different layout structures.

```html
// In resources/views/layouts/master.blade.php
// Copy content from resources/views/layouts/master-layouts.blade.php
```

--------------------------------

### Remove ECharts Package using npm

Source: https://themesbrand.com/velzon/docs/laravel/echarts

This command uninstalls the ECharts library from your project's dependencies. Alternatively, you can manually remove the package entry from your package.json file and then run npm install.

```bash
npm unistall echarts or you can remove package by removing specific package from package.json
```

--------------------------------

### Add ECharts Package using npm

Source: https://themesbrand.com/velzon/docs/laravel/echarts

This command installs the ECharts library as a project dependency using npm. This is the recommended method for managing JavaScript libraries in modern web development workflows.

```bash
npm i echarts --save
```
Tokens:
Raw