DEV Community

jasuke-dev
jasuke-dev

Posted on

Add Tom Select to Laravel using Laravel MIX

This is how to add Tom Select package to youre laravel project

Installing Tom Select

Open terminal in youre laravel project and install the package

npm i tom-select
Enter fullscreen mode Exit fullscreen mode

Applying Tom Select JS

open /resources/js/app.js and add Tom Select js in there

window.TomSelect = require('tom-select')
Enter fullscreen mode Exit fullscreen mode

Applying Tom Select CSS

Tom Select functionality will not work with out the css file, add Tom Select CSS to /resources/css/app.css

...
@import '/node_modules/tom-select/dist/css/tom-select.default.css';
...
Enter fullscreen mode Exit fullscreen mode

There are many css file, select what you like

Build laravel mix

npm run development

Add app.js and app.css to blade file

Dont forget to add app.js and app.css from public folder

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
Enter fullscreen mode Exit fullscreen mode

Done Tom Select has been succesfully add to youre laravel project

Discussion (0)