Use Tabler on laravel

gistfile1.txt

npm install --save-dev bootstrap bootstrap-sass bootstrap-datepicker popper.js chart.js d3 font-awesome jquery-circle-progress jvectormap moment requirejs select2 select2-bootstrap-theme selectize sparkline tabler-ui tablesorter

tabler.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // Chart.js
    require('chart.js');

    // Sparkline
    require('sparkline');

    // Tablesorter
    require('tablesorter');

    // jQuery vector map
    require('vector-map');

    // Selectize
    require('selectize');

    // RequireJS
    require('requirejs/require');

    // bootstrap-datepicker
    require('bootstrap-datepicker');

    // select2
    require('select2');

    // Tabler
    require('tabler-ui/dist/assets/js/dashboard');

    // Tabler Plugin
    require('tabler-ui/src/assets/plugins/charts-c3/js/c3.min');
    require('tabler-ui/src/assets/plugins/fullcalendar/js/fullcalendar.min');
    require('tabler-ui/src/assets/plugins/input-mask/js/jquery.mask.min');
    require('tabler-ui/src/assets/plugins/prismjs/js/prism.pack');

} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

$(document).ready(function() {
    $('.js-datepicker').datepicker({
        todayHighlight: true,
        autoclose: true
    });
    $('.js-select2').select2({
        allowClear: true,
        dropdownAutoWidth: true,
        theme: 'bootstrap'
    });
});

tabler.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext");

// Variables
@import "variables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";

// Tabler
@import "~tabler-ui/src/assets/scss/bundle";

// Tabler
@import "~font-awesome/scss/font-awesome";

// Bootstrap Datepicker
@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css";

// Select2
@import "~select2/dist/css/select2.css";

// Select2 Bootstrap Theme
@import "~select2-bootstrap-theme/src/select2-bootstrap";

// Tablers Plugins
@import "~tabler-ui/src/assets/plugins/charts-c3/plugin";
@import "~tabler-ui/src/assets/plugins/fullcalendar/plugin";
@import "~tabler-ui/src/assets/plugins/iconfonts/plugin";
@import "~tabler-ui/src/assets/plugins/maps-google/plugin";
@import "~tabler-ui/src/assets/plugins/prismjs/plugin";

.custom-control-label::after, .custom-control-label::before {
  top: 0.1rem;
}
.select2 {
  width: 100% !important;
}
.select2-dropdown {
  z-index: 9999;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  margin-top: 0px;
}

Tabler_on_Laravel.md

This is a simple instruction to use Tabler in your next Laravel project.

(Tabler is a beautiful dashboard: https://tabler.io/)

How to install:

1. first of all run content of gistfile1.txt in your Laravel project.
2. Copy tabler.js to recourses/js.
3. Copy tabler.scss to resources/sass.
4. Replace webpack.mix.js with your current webpack.mix.js

webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
    resolve: {
        alias: {
            'circle-progress': 'jquery-circle-progress',
            'core': path.resolve(__dirname, 'node_modules/tabler-ui/dist/assets/js/core.js'),
            'vector-map': 'jvectormap'
        }
    }
});

mix.js('resources/js/tabler.js', 'public/js')
    .sass('resources/sass/tabler.scss', 'public/css');

mix.autoload({
    jquery: [ '$', 'jQuery', 'jquery', 'window.jQuery'],
});

mix.extract([
    'lodash',
    'popper.js',
    'bootstrap',
    'bootstrap-datepicker',
    'bootstrap-sass',
    'chart.js',
    'd3',
    'jquery',
    'jquery-circle-progress',
    'jvectormap',
    'moment',
    'requirejs/require',
    'select2',
    'selectize',
    'sparkline',
    'tablesorter',
    'vue'
], 'public/js/vendor.js');

mix.version();

mix.setPublicPath('public');