Laravel Viltify
Laravel Viltify is a heavily opinionated Laravel starter kit. It's intent is to seamlessly integrate Vue, Inertia.js, Laravel, TailwindCSS and Vuetify, so you don't waste your time learning how to do it and focus on writing your application, leaving setup behind.
Requirements
-
Operating System: This package should work on MacOS and Linux. If you're using Windows, you're gonna need WSL.
-
Vue CLI: Under the hood, this package will call the Vue CLI tool. Make sure you have Vue CLI V4 installed before continuing. If you don't, don't worry. The installation is fairly simple.
Quick Start
HEADS UP: this package is meant to be used ONLY ON FRESH LARAVEL INSTALLATIONS.
# Create a new Laravel project
composer create-project laravel/laravel my-app
# Enter the project folder
cd my-app
# Install Laravel Viltify
composer require dalpizzol/laravel-viltify
# Create your base tables
php artisan migrate
# Run the installer
php artisan viltify:install
# Remove the package so you don't accidentally run it again in the future
composer remove dalpizzol/laravel-viltify
# Enter the resources folder
cd resources
# Lift the devserver
npm run serve
HEADS UP: By the default, the devserver will lift at port
8080.
Why would I use this instead of Laravel Breeze or Laravel Jetstream?
This package is actually heavily based on Laravel Breeze. A lot of code was simply ripped off that. But there's some advantages here:
Vue CLI instead of Laravel Mix
This package actually turns your resources folder into a Vue app generated by Vue CLI. This means that inside resources you can do things like vue add some-vue-cli-plugin which you can't when using Laravel Mix. Vue CLI is also much more stable than Laravel Mix and much more focused and battle tested for use with Vue, so you are probably going to save some time avoiding common issues related to Laravel Mix.
This also allows you to use Vue CLI's GUI inside resources, if that's your thing...
Vuetify's full power in your hands
While official Laravel starter kits delivers a dozen Vue components, they are fairly simple. Laravel Viltify comes with Vuetify UI component library already installed and configured so you can take advantage of 70+ highly customizable, responsive and beautiful components based on Google's Material Design.
The perfect Marriage between Vuetify and TailwindCSS
Laravel Viltify comes with Vuetify and TailwindCSS already configured so you can use both without worrying about class collisions. All you have to do is to prefix your tailwind classes with tw-.
Inertia.js conveniences
The v-link global component
Laravel Viltify offers a globally registered v-link component which is a Vuetify v-btn component wrapped by an Inertia.js Link component. This way you can use Inertia.js links everywhere without having to remember to include the Link component locally on every component and they can use every style available to v-btn components. Inertia's Link component is also registered globally.
<v-link :href="someUrl" color="success" rounded outlined x-large>This is an Inertia.js linkv-link>
Server driven toast notifications
It also ships with a server driven toast notification system specifically crafted to work nicely with Inertia.js. This means you can do things like this:
// Success message
return redirect()
->route('dashboard')
->toast('Laravel Viltify is awesome');
// Error message
return redirect()
->route('dashboard')
->toast('You didn\'t give Laravel Viltify a star. =(', 'error');
Easily create custom endpoints
If you need a separate build for an entirely different endpoint, for instance, and admin area, you can use the pages prop at resources/vue.config.js.
pages: {
...page('main', 'app'),
...page('admin', 'app-admin')
},
// The following disables prefetch links generation for each endpoint
chainWebpack: config => {
config.plugins.delete('prefetch-main'),
config.plugins.delete('prefetch-admin')
}
Then, you need to instruct Inertia to use the app-admin.blade.php view when rendering an admin page.
return Inertia::setRootView('app-admin')
->render('admin/Dashboard');
Isolated client side environment settings
When using Laravel Mix, client side environment settings are put into MIX_ prefixed variables inside .env file. Here, since our resources folder is actually a Vue CLI generated app, you can leverage the pattern shipped by Vue CLI do deal with environment variables. Laravel Viltify comes out of the box with a resources/.env.local for the devserver and a resources/.env.production example file, so you can deal with every client side setting separated from Laravel settings.
Resonable defaults with production builds in mind
Code Splitting out of the box
Since we're dealing with SPAs, Laravel Viltify makes sure that code splitting takes place. All the files needed by any route are loaded on demand by default.
Material Design Icons JS SVG instead of WebFont
By default Vuetify comes configured to use @mdi/js instead of a regular WebFont, so it enforces that you only ever load the icons you really need. Learn more here.
License
This software is provided free of charge and without restriction under the MIT License
121 Dec 31, 2022
16 Nov 16, 2022
3 Oct 21, 2021
1 Oct 29, 2021
6 Dec 28, 2022
16 Dec 23, 2022
3k Jan 6, 2023
53 Oct 24, 2022
3 Feb 22, 2022
3 Apr 4, 2022
1 Jan 3, 2022
2 Dec 23, 2022
8 Nov 24, 2022
10 Aug 3, 2022
11 Jul 12, 2022
400 Dec 29, 2022
83 Dec 26, 2022
30 Oct 11, 2022