PHPackages                             feldsam-inc/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. feldsam-inc/laravel-buefy-preset

ActiveLibrary

feldsam-inc/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.8(4y ago)011MITVue

Since Dec 21Pushed 4y agoCompare

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

READMEChangelogDependencies (2)Versions (9)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 feldsam-inc/laravel-buefy-preset`.
- Then run `php artisan ui 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` and `yarn watch`.
- 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

25

—

LowBetter than 37% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75% 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 ~143 days

Recently: every ~213 days

Total

8

Last Release

1696d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a7348aaea9028b3d014f6653c52c4e8ffe0658b1f8428199ca883750f439562?d=identicon)[feldsam](/maintainers/feldsam)

---

Top Contributors

[![pratyushpundir](https://avatars.githubusercontent.com/u/1782464?v=4)](https://github.com/pratyushpundir "pratyushpundir (9 commits)")[![feldsam](https://avatars.githubusercontent.com/u/951648?v=4)](https://github.com/feldsam "feldsam (2 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/feldsam-inc-laravel-buefy-preset/health.svg)

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

###  Alternatives

[bagisto/bagisto

Bagisto Laravel E-Commerce

26.2k161.6k7](/packages/bagisto-bagisto)[grumpydictator/firefly-iii

Firefly III: a personal finances manager.

22.8k69.3k](/packages/grumpydictator-firefly-iii)[krayin/laravel-crm

Krayin CRM

22.0k32.8k1](/packages/krayin-laravel-crm)[unopim/unopim

UnoPim Laravel PIM

9.4k1.8k](/packages/unopim-unopim)[laravel-frontend-presets/bulma

Bulma Frontend Preset For Laravel Framework 6.0 and Up

17455.8k](/packages/laravel-frontend-presets-bulma)[kompo/kompo

Laravel & Vue.js FullStack Components for Rapid Application Development

11812.4k21](/packages/kompo-kompo)

PHPackages © 2026

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