PHPackages                             pratyushpundir/laravel-buefy-preset - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. pratyushpundir/laravel-buefy-preset

ActiveLibrary[Utility & Helpers](/categories/utility)

pratyushpundir/laravel-buefy-preset
===================================

This preset provides UI components that marry Bulma and VueJS together in the form of Buefy for any new Laravel site / web-app.

0.0.7(6y ago)54962[1 PRs](https://github.com/pratyushpundir/laravel-buefy-preset/pulls)MITVue

Since Dec 21Pushed 6y ago2 watchersCompare

[ Source](https://github.com/pratyushpundir/laravel-buefy-preset)[ Packagist](https://packagist.org/packages/pratyushpundir/laravel-buefy-preset)[ RSS](/packages/pratyushpundir-laravel-buefy-preset/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (8)Used By (0)

### Buefy Frontend Preset For Laravel

[](#buefy-frontend-preset-for-laravel)

This preset provides UI components that marry [Bulma](https://bulma.io/) and [VueJS](https://vuejs.org/) together in the form of [Buefy](https://buefy.github.io/documentation/snackbar) for any new [Laravel](https://laravel.com/) site / web-app. In Buefy's own words, it provides:

> Lightweight UI components for Vue.js based on Bulma.

 [![Animation](https://camo.githubusercontent.com/9ec922a0747fa5b16c1029abe6fa055b4056cbef521b1652a7e66b9f252b952c/68747470733a2f2f692e6962622e636f2f4a4372375872622f53637265656e2d466c6f772e676966)](https://camo.githubusercontent.com/9ec922a0747fa5b16c1029abe6fa055b4056cbef521b1652a7e66b9f252b952c/68747470733a2f2f692e6962622e636f2f4a4372375872622f53637265656e2d466c6f772e676966)

### What it does

[](#what-it-does)

- Removes `bootstrap` in favor of `bulma` and provides VueJS components to easily use all (and more...) of the Bulma components.
- Other NPM packages removed: `lodash`, `jquery`, `popper.js`.
- Adds a Bulma based Blade layout: `resources/views/buefy/layouts/app.blade.php`.
- Adds a Bulma based Blade view: `resources/views/buefy/welcome.blade.php`.
- Adds a Bulma based "Navbar" Blade component: `resources/views/buefy/shared/bulma-nav.blade.php`.
- Adds Vue and Bulma based "Navbar" Blade component: `resources/views/buefy/shared/bulma-nav.blade.php`.
- Adds Vue and Bulma based "Login" and "Register" forms components: `resources/js/components/shared/LoginForm.vue`, `resources/js/components/shared/RegisterForm.vue`.
- Adds versioning / cache-busting of CSS and JS assets for production environments in your `webpack.mix.js`.

### WARNING!!

[](#warning)

The preset provided Blade views are namespaced their own directory, `/buefy` so nothing should go wrong on that front, but, for a non-fresh project, it ***will 100%*** squash any custom JS, SASS, Mix code you may have written). ***You have been warned!***

### Getting Started

[](#getting-started)

- `cd` into your ***fresh*** Laravel project.
- Run `composer require pratyushpundir/laravel-buefy-preset`.
- Then run `php artisan preset buefy`. This will scaffold everything you need to replace Bootstrap with Bulma and set up your JS, SASS and Blade Views.
- Install and compile your assets with `yarn && yarn watch` or `npm install && npm run watch` (but `yarn` is so much better!!!).
- Visit `routes/web.php` and change the following piece of code:

```
Route::get('/', function () {
    // Change this...
    return view('welcome');
});
```

to

```
Route::get('/', function () {
    // ...to this!
    return view('buefy.welcome');
});
```

That's it!. Run `php artisan serve` and visit `http://localhost:8000` for a brand new, Bulma+VueJS-based, Welcome page!

### Extras

[](#extras)

#### Asset versioning / cache-busting in Production

[](#asset-versioning--cache-busting-in-production)

You need to ensure 2 things happen for this to work:

1. SASS and JS assets need to be compiled using the the `production` settings. To do this, run `yarn production` or `yarn prod`. You can use NPM too of course. But we talked about this!
2. Your Laravel app needs to be in `production` environment. Do this in your `.env` file.

#### Enable the Version Number Badge in `bulma-nav.blade.php`

[](#enable-the-version-number-badge-in-bulma-navbladephp)

1. Add `'version' => env('APP_VERSION', '1.0.0'),` to your `config/app.php` file.
2. Add `APP_VERSION=YOUR_VERSION_NUMBER` to your `.env` file. Replace "YOUR\_VERSION\_NUMBER" with whatever you need.

#### Configure the environment indicator

[](#configure-the-environment-indicator)

This preset also adds an environment indicator to help you distinguish between various app environments your Laravel app can be in (local, dev, staging, production, etc.). It shows up as a thin colored bar at the very top of the page. The color of the bar indicates the app environment.

This works by adding a class-name equal to a hyphenated form of the environment name you set in your `.env` file. You can then configure the colors you want your indicator to have in `resources/sass/app.scss`. Hunt down the following piece of code and change it as needed:

```
// Configure environment-wise colors you need per environment
#env-indicator.local {
    background-color: $primary;
}

#env-indicator.dev {
    background-color: $primary-invert;
}

// Hide the environment indicator on your choice of environments
#env-indicator.production,
#env-indicator.staging {
    display: none !important;
}
```

### Author

[](#author)

Pratyush Pundir
Email:

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 90% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~41 days

Recently: every ~62 days

Total

7

Last Release

2450d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/07a09b8c9258d5f23a050d72f8c0e11c6ed18aaf267b17c5cf62fd675d8b77e2?d=identicon)[pratyushpundir](/maintainers/pratyushpundir)

---

Top Contributors

[![pratyushpundir](https://avatars.githubusercontent.com/u/1782464?v=4)](https://github.com/pratyushpundir "pratyushpundir (9 commits)")[![ipl-pratyush](https://avatars.githubusercontent.com/u/29448609?v=4)](https://github.com/ipl-pratyush "ipl-pratyush (1 commits)")

---

Tags

laravelbulmaVue.jsbuefylaravel frontend presetslaravel vue bulmalaravel bulma vuejs

### Embed Badge

![Health badge](/badges/pratyushpundir-laravel-buefy-preset/health.svg)

```
[![Health](https://phpackages.com/badges/pratyushpundir-laravel-buefy-preset/health.svg)](https://phpackages.com/packages/pratyushpundir-laravel-buefy-preset)
```

###  Alternatives

[classiebit/addchat-laravel

Live chat widget for Laravel that also includes multi-user chat, group permissions, customer support chat & more.

13912.0k](/packages/classiebit-addchat-laravel)[awes-io/table-builder

A component that allows creating responsive HTML tables or lists from data object

4726.1k4](/packages/awes-io-table-builder)[stephenjude/filament-blog

Filament Blog Builder

20317.8k](/packages/stephenjude-filament-blog)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)