Introducing Laravel VILTify: a Vue CLI & Vuetify powered alternative to Breeze for the VILT stack
Tags: laravel, inertiajs, php, vue
Published: 2021-12-15 13:29:06

Some time ago I wrote about [how to integrate Laravel with a Vue app generated by the Vue CLI](https://dev.to/mtdalpizzol/integrate-laravel-and-vue-cli-app-with-hot-module-replacement-and-no-backend-api-4h76) and [how to integrate all of that with Inertia.js](https://dev.to/mtdalpizzol/integrate-laravel-inertia-js-with-a-vue-cli-app-32ac). That was fine and I use that setup to this day. But back then, my intent was to document what I needed to do when I was starting a new project with Laravel and wanted to replace Laravel Mix with Vue CLI.

Now, there are two more tools that I always use on my projects: Vuetify and TailwindCSS. And, off course, I also need to set those up, making sure that their classes don't clash and do some Vuetify configuration as well, like replacing Material Design Icon's WebFont by it's JavaScript SVG alternative.

On top of that, there are some Inertia.js conveniences that I'd like to have, like global Inertia Link components and a Vuetify Button alternative that supports Inertia Link. A server driven toast notification system that plays well with Inertia and Vuetify together would also be nice.

So... Here it is:

## [Laravel VILTify](https://github.com/MtDalPizzol/laravel-viltify)

**Laravel Viltify** is a heavily opinionated Laravel starter kit. It's intent is to seamlessly integrate [<ins>**V**</ins>ue](https://vuejs.org/), [<ins>**I**</ins>nertia.js](https://inertiajs.com/), [<ins>**L**</ins>aravel](https://laravel.com/), [<ins>**T**</ins>ailwindCSS](https://tailwindcss.com/) and [Vuet<ins>**ify**</ins>](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**.

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

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).

### **The perfect Marriage between Vuetify and TailwindCSS**

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

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

```html
<v-link :href="someUrl"
    color="success"
    rounded
    outlined
    x-large
>
    This is an Inertia.js link
</v-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:

```php
// 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`.

```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.

```php
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**](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.

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

## Is there any drawbacks to this?

Maybe. 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.

Another thing is that since we're using Vue CLI v4, it uses PostCSS 7, and newer versions of Tailwind requires PostCSS 8. Because of that, we can't use recently released TailwindCSS v3, and when using ^v2.1 we can't use JIT mode. HOWEVER, since we're using Vuetify, TailwinCSS will probably be used sparingly. So, chances are that this will not be a HUGE problem.

## Conclusion

So, that's it! Hope you enjoy the package and feel free to give feedback.