Introducing Laravel VILTify: a Vue CLI & Vuetify powered alternative to Breeze for the VILT stack

Some time ago I wrote about how to integrate Laravel with a Vue app generated by the Vue CLI and how to integrate all of that with Inertia.js. 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

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.

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

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

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.

Comments

[Patricio]

Amazing, as always!!
Thank you Matheus!!

[Matheus Dal'Pizzol]

Thanks, Patricio! I hope this to be just the beginning... ;)