Installation for Tabler 1.0.0-alpha.7

[incoming-th]

HI,

Looking at this work and maybe you will be able to have a thought on how to install tabler.io with webpack on Laravel.

Actually the tabler-ui is not updated, and this one is the most up to date (for now):

https://www.npmjs.com/package/tabler

Unfortunately I cannot get it to work, by any chance if you had a look at it that would be awezone.

Thanks.

[yajra]

@MickaelTH I was able to make it work by copying the full tabler/scss folder to resources/scss/tabler-ui.

Afterwards, I updated app.scss with:

@import "tabler-ui/variables";
@import '~bootstrap/scss/bootstrap';
@import "tabler-ui/tabler";

Also, it is important that we use "bootstrap": "twbs/bootstrap#81404d2", version. Still experimenting on it but so far it's working with laravel-mix.

Do you know how to install 1.0.0-alpha.7 using npm? Tried several ways but I can only install 0.0.34 as the latest version. Thanks!

-- Edit -- Was able to install via commit hash. "tabler-ui": "tabler/tabler#14d0c00",. Not sure if it' the proper way though.

New app.scss

@import "~tabler-ui/scss/variables";
@import '~bootstrap/scss/bootstrap';
@import "~tabler-ui/scss/tabler";

[incoming-th]

@yajra Thanks for explanation, I was doing that as well but tabler-ui is not the latest version (even if now tabler still in alpha) so I used https://www.npmjs.com/package/tabler

Install via npm is fine, but downside we cannot use the scss variables (meaning it is like using vanilla tabler) and the small js for tooltip is not working. The default colors are fine for me, and I am using another css files to tweaks some of the things I want.

npm i tabler

ressources/assets/js/app.js require('./bootstrap');

ressources/assets/js/bootstrap.js window._ = require('lodash'); try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap'); require('tabler/js/tabler.js'); } catch (e) {}

ressources/assets/sass/app.scss @import '~tabler/dist/css/tabler.css'; @import '~tabler/dist/css/tabler-buttons'; @import '~tabler/dist/css/tabler-flags.css'; @import '~tabler/dist/css/tabler-payments.css';

webpack.mix.js const mix = require('laravel-mix');

mix .options({processCssUrls: false}) .sourceMaps(true, 'source-map') .js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .version();

That's equivalent to just get the compiled CSS files from tabler and put them in the public folder. I cannot use the CDN because they are blocked by my users, but it would be faster to just include them if you don't plan to change the default colors.

[yajra]

@MickaelTH I think you just need to set bootstrap variable on bootstrap.js for it to work.

window.bootstrap = require('bootstrap');

require('tabler-ui/js/tabler.js');

The last issue I had and haven't resolve yet is the icons on menu. Haven't had the time to explore/fix it yet.

Thanks for the tip about npm i tabler.

[lukaskrs]

Hi, I'm a newbie. just last week learning about laravel and now I'm looking to use tabler. I'm a bit confused with the steps in this page that seems back and forward and some might be overlapping.

so, I would like to ask, after running npm i tabler I would need to change every file listed by @MickaelTH and which file wouldn't need changes if I've done the step that Mickael mentioned.

@MickaelTH I think you just need to set bootstrap variable on bootstrap.js for it to work.

window.bootstrap = require('bootstrap');

require('tabler-ui/js/tabler.js');

The last issue I had and haven't resolve yet is the icons on menu. Haven't had the time to explore/fix it yet.

Thanks for the tip about npm i tabler.

Any direction or a little explanation would be much appreciated. Thank you very much for the help.