PHPackages                             dalpizzol/laravel-viltify - 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. [Framework](/categories/framework)
4. /
5. dalpizzol/laravel-viltify

ActiveLibrary[Framework](/categories/framework)

dalpizzol/laravel-viltify
=========================

A starter kit that integrates Laravel with Vue CLI, Inertia.js, TailwindCSS and Vuetify

v0.2.0(4y ago)492219[2 issues](https://github.com/MtDalPizzol/laravel-viltify/issues)MITPHPPHP ^7.3|^8.0

Since Dec 14Pushed 4y ago3 watchersCompare

[ Source](https://github.com/MtDalPizzol/laravel-viltify)[ Packagist](https://packagist.org/packages/dalpizzol/laravel-viltify)[ Docs](https://github.com/MtDalPizzol/laravel-viltify)[ RSS](/packages/dalpizzol-laravel-viltify/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (3)Versions (5)Used By (0)

 [![Laravel VILTify](stubs/resources/src/assets/logo.png)](stubs/resources/src/assets/logo.png)

 [ ![Total Downloads](https://camo.githubusercontent.com/1f470902ed1c49602ad21c325ce79488c9e16c204c189dc9f88c82b6868c9aed/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f64616c70697a7a6f6c2f6c61726176656c2d76696c74696679) ](https://packagist.org/packages/dalpizzol/laravel-viltify) [ ![Latest Stable Version](https://camo.githubusercontent.com/7a5c346f0ca140a5de5e0b2906c713cc8ab74f982dc378cea2f4a72aedb44b4e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f64616c70697a7a6f6c2f6c61726176656c2d76696c74696679) ](https://packagist.org/packages/dalpizzol/laravel-viltify) [ ![License](https://camo.githubusercontent.com/7c82b32ab2d85d6d9929dbd7c5144f2afc8a9049fe52852a5318ce6fff68028c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f64616c70697a7a6f6c2f6c61726176656c2d76696c74696679) ](https://packagist.org/packages/dalpizzol/laravel-viltify)

**Laravel VILTify**
===================

[](#laravel-viltify)

**Laravel VILTify** is a heavily opinionated Laravel starter kit. It's intent is to seamlessly integrate [**V**ue](https://vuejs.org/), [**I**nertia.js](https://inertiajs.com/), [**L**aravel](https://laravel.com/), [**T**ailwindCSS](https://tailwindcss.com/) and [Vuet**ify**](https://vuetifyjs.com/en/), so you don't waste your time learning how to do it and focus on writing your application, **leaving setup behind**.

Table of contents
-----------------

[](#table-of-contents)

- [Requirements](#requirements)
- [Quick start](#quick-start)
- [Troubleshooting](#troubleshooting)
- [Why would I use this instead of Laravel Breeze or Laravel Jetstream?](#why-would-i-use-this-instead-of-laravel-breeze-or-laravel-jetstream)

    - [Vue CLI instead of Laravel Mix](#vue-cli-instead-of-laravel-mix)
    - [Vuetify's full power in your hands](#vuetifys-full-power-in-your-hands)
    - [No conflicts between Vuetify and TailwindCSS classes](#no-conflicts-between-vuetify-and-tailwindcss-classes)
    - [Inertia.js conveniences](#inertiajs-conveniences)
        - [The `v-link` global component](#the-v-link-global-component)
        - [Server driven toast notifications](#server-driven-toast-notifications)
    - [Resonable defaults with production builds in mind](#resonable-defaults-with-production-builds-in-mind)
        - [Code Splitting out of the box](#code-splitting-out-of-the-box)
        - [Material Design Icons JS SVG instead of WebFont](#material-design-icons-js-svg-instead-of-webfont)
    - [Separeted builds for different endpoints](#separeted-builds-for-different-endpoints)
    - [Isolated client side environment settings](#isolated-client-side-environment-settings)
- [Drawbacks](#drawbacks)
- [License](#license)

**Requirements**
----------------

[](#requirements)

- **Operating System**: This package should work on **MacOS** and **Linux**. If you're using **Windows**, you're gonna need **WSL**.
- **Laravel 9**
- **Vue CLI**: Under the hood, this package will call the [**Vue CLI**](https://cli.vuejs.org/) tool. Make sure you have **Vue CLI V5** installed before continuing. If you don't, [**the installation**](https://cli.vuejs.org/guide/installation.html) is fairly simple.

**Quick Start**
---------------

[](#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 assets devserver
npm run serve

# Lift the PHP server in another terminal
# (if you're not already running one)
php artisan serve
```

> **HEADS UP**:

> Be aware that you're running two servers, just like when you use Laravel Mix. Your PHP application runs at port `80` while the devserver runs at `8080`. So, in your browser, you navigate to your PHP application at port `80`, for instance: `http://localhost`.

**Troubleshooting**
-------------------

[](#troubleshooting)

In some scenarios, if you're using Node.js 17.x.x or higher, you might encounter an `ERR_OSSL_EVP_UNSUPPORTED` error when running the `resources/package.json` scripts, like `npm run serve` or `npm run build`.

This is related to changes introduced by Node.js 17 and you can read more about this [here](https://github.com/vuejs/vue-cli/issues/6770), [here](https://github.com/PassiveDNS/PassiveDNS/pull/24), and [here](https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported).

You don't need to downgrade Node.js. Instead, just prepend `NODE_OPTIONS=--openssl-legacy-provider` to your `resources/package.json` scripts:

```
// resources/package.json

{
  scripts: {
    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build"
  }
}
```

**Why would I use this instead of Laravel Breeze or Laravel Jetstream?**
------------------------------------------------------------------------

[](#why-would-i-use-this-instead-of-laravel-breeze-or-laravel-jetstream)

This package is actually heavily based on [**Laravel Breeze**](https://github.com/laravel/breeze). A lot of code was simply ripped off from that. But there's some advantages here:

### **Vue CLI instead of Laravel Mix**

[](#vue-cli-instead-of-laravel-mix)

This package actually turns your `resources` folder into a Vue app generated by [**Vue CLI**](https://cli.vuejs.org/). This means that inside `resources` you can do things like `vue add some-vue-cli-plugin` which you can't when using [Laravel Mix](https://laravel-mix.com/). 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**](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) inside `resources`, if that's your thing...

### **Vuetify's full power in your hands**

[](#vuetifys-full-power-in-your-hands)

While official Laravel starter kits delivers a dozen Vue components, they are fairly simple. **Laravel VILTify** comes with [**Vuetify**](https://vuetifyjs.com/) 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**](https://material.io/design).

### **No conflicts between Vuetify and TailwindCSS classes**

[](#no-conflicts-between-vuetify-and-tailwindcss-classes)

**Laravel VILTify** comes with Vuetify and [**TailwindCSS**](https://tailwindcss.com/) 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**

[](#inertiajs-conveniences)

#### **The v-link global component**

[](#the-v-link-global-component)

**Laravel VILTify** offers a globally registered `v-link` component which is a [**Vuetify `v-btn`**](https://vuetifyjs.com/en/components/buttons/) component wrapped by an [**Inertia.js `Link`**](https://inertiajs.com/links) 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.

```

  This is an Inertia.js link rendered as a Vuetify Button

```

#### **Server driven toast notifications**

[](#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');
```

Another cool feature it offers are **validation toasts**. This is usefull when you have some "invisible data" on a form that may not be valid. For instance, a reCaptcha V3 token. Since there's no visible form element for the token, you may want to toast the validation error if the token validation fails.

```
Toast::validation('recaptcha_token');

request()->validate([
  'recaptcha_token',
  // ...
]);

// It also accepts an array:
// Toast::validation(['recaptcha_token', 'another_field'])
```

> Make sure you call `Toast::validation` before you actually run your validations.

### **Resonable defaults with production builds in mind**

[](#resonable-defaults-with-production-builds-in-mind)

#### **Code Splitting out of the box**

[](#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**

[](#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**](https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons-js-svg).

### **Separeted builds for different endpoints**

[](#separeted-builds-for-different-endpoints)

If you need a separate build for an entirely different endpoint, for instance, an **admin area**, follow these steps:

**1.** Duplicate `resources/src/templates/app.blade.php` and rename it to `resources/src/templates/app-admin.blade.php`. This will be your Inertia's `rootView`.

**2.** Create a new entry in 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')
  }
```

**3.** Duplicate the `resources/src/main.js` and rename it to `resources/src/admin.js`.

**4.** 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**

[](#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**](https://cli.vuejs.org/guide/mode-and-env.html#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.

Drawbacks
---------

[](#drawbacks)

Since the intent here is to use Vuetify, we're still using Vue 2 and Webpack instead of Vue 3 and Vite, since Vuetify support for Vue 3 hasn't released yet.

**License**
-----------

[](#license)

This software is provided free of charge and without restriction under the [MIT License](/LICENSE)

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~26 days

Total

4

Last Release

1530d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d9e2c1697547ef3732a97ab02608313dc3d7cf0504394bcdd7c8d01f1a2c8d9e?d=identicon)[MtDalPizzol](/maintainers/MtDalPizzol)

---

Top Contributors

[![MtDalPizzol](https://avatars.githubusercontent.com/u/3843774?v=4)](https://github.com/MtDalPizzol "MtDalPizzol (9 commits)")

### Embed Badge

![Health badge](/badges/dalpizzol-laravel-viltify/health.svg)

```
[![Health](https://phpackages.com/badges/dalpizzol-laravel-viltify/health.svg)](https://phpackages.com/packages/dalpizzol-laravel-viltify)
```

###  Alternatives

[laravel/ui

Laravel UI utilities and presets.

2.7k134.9M601](/packages/laravel-ui)[livewire/livewire

A front-end framework for Laravel.

23.5k75.5M1.8k](/packages/livewire-livewire)[laravel/breeze

Minimal Laravel authentication scaffolding with Blade and Tailwind.

3.0k31.3M148](/packages/laravel-breeze)[graham-campbell/markdown

Markdown Is A CommonMark Wrapper For Laravel

1.3k7.1M64](/packages/graham-campbell-markdown)[laravel/wayfinder

Generate TypeScript representations of your Laravel actions and routes.

1.7k4.1M69](/packages/laravel-wayfinder)[laravel/installer

Laravel application installer.

83610.7M20](/packages/laravel-installer)

PHPackages © 2026

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