Downloads
Stars
Version
This preset provides UI components that marry Bulma and VueJS together in the form of Buefy for any new Laravel site / web-app. In Buefy's own words, it provides:
Lightweight UI components for Vue.js based on Bulma.
bootstrap
in favor of bulma
and provides VueJS components to easily use all (and more...) of the Bulma components.lodash
, jquery
, popper.js
.resources/views/buefy/layouts/app.blade.php
.resources/views/buefy/welcome.blade.php
.resources/views/buefy/shared/bulma-nav.blade.php
.resources/views/buefy/shared/bulma-nav.blade.php
.resources/js/components/shared/LoginForm.vue
, resources/js/components/shared/RegisterForm.vue
.webpack.mix.js
.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!
cd
into your fresh Laravel project.composer require pratyushpundir/laravel-buefy-preset
.php artisan preset buefy
. This will scaffold everything you need to replace Bootstrap with Bulma and set up your JS, SASS and Blade Views.yarn && yarn watch
or npm install && npm run watch
(but yarn
is so much better!!!).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!
You need to ensure 2 things happen for this to work:
production
settings. To do this, run yarn production
or yarn prod
. You can use NPM too of course. But we talked about this!production
environment. Do this in your .env
file.bulma-nav.blade.php
'version' => env('APP_VERSION', '1.0.0'),
to your config/app.php
file.APP_VERSION=YOUR_VERSION_NUMBER
to your .env
file. Replace "YOUR_VERSION_NUMBER" with whatever you need.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;
}
Pratyush Pundir
Email: [email protected]