Laravel Vite Compile Tabler Theme Bootstrap 5

app.js

import '~tabler/dist/js/tabler.min.js';
import './bootstrap';
import '../sass/app.scss';

app.scss

@import '~tabler/src/scss/tabler';

bootstrap.js

import loadash from 'lodash'
window._ = loadash


import * as Popper from '@popperjs/core'
window.Popper = Popper

/**
 * 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.
 */

import axios from 'axios'
window.axios = axios

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

/**
 * 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,
//     forceTLS: true
// });

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.27",
        "bootstrap": "^5.1.3",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "@tabler/core": "^1.0.0-beta11",
        "autosize": "^5.0.1",
        "imask": "^6.4.2",
        "resolve-url-loader": "^5.0.0",
        "vite": "^3.0.0"
    }
}

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~tabler': path.resolve(__dirname, 'node_modules/@tabler/core'),
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});

thank you for sharing
it works!

Thanks you!

I use the build CSS version by Tabler provided.

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@tabler/core": "^1.0.0-beta20",
        "axios": "^1.6.1",
        "laravel-vite-plugin": "^0.8.0",
        "lodash": "^4.17.21",
        "vite": "^4.0.0"
    }
}

---

/resources/js/app.js

import './bootstrap';

import '@tabler/core';

---

/resources/css/app.css

@import "~tabler";

---

vite.config.js and bootstrap.js same as the above.