DEV Community

Cover image for 🚀 One-Liner Laravel + Vue.js Setup: Skip the Boilerplate, Start Coding!
Than Phan
Than Phan

Posted on

🚀 One-Liner Laravel + Vue.js Setup: Skip the Boilerplate, Start Coding!

#laravel #vue #webdev

No extra tools or libraries - just a simple script that creates a Laravel + Vue.js + Tailwind project, like the old days.

Hey Dev.to fam! 👋 If you're like me, tired of spending hours wiring up Laravel with Vue 3, Vite, and Tailwind CSS just to get a "Hello World" running - I've got your back. I just released laravel-vuejs-setup, a dead-simple bash script that bootstraps everything in seconds. No scaffolds, no bloat - just pure, manual setup magic.

Why This Script?

Modern stacks shouldn't feel like a puzzle. This tool creates a fresh Laravel project, installs Vue 3 with Vite HMR, layers on Tailwind CSS v3, and even throws in a sample interactive counter in App.vue (styled with Tailwind, of course). It's scaffold-free, so you control the vibe - no Breeze or Inertia unless you want 'em later.

Bonus: Optional Docker configs for nginx, PHP-FPM, MySQL, and Supervisor. Containerize your dev env with docker-compose up -d and call it a day.

Quick Start

Grab it straight from GitHub—no clone needed:

curl -s https://raw.githubusercontent.com/Urani-Solutions/laravel-vuejs-setup/refs/heads/main/create_laravel_vuejs.sh | bash -s <project-name>
Enter fullscreen mode Exit fullscreen mode
  • <project-name>: Your app's folder (defaults to my-laravel-vue-app).

Boom! Project ready. Fire up:

  • php artisan serve
  • npm run dev

Hit http://localhost:8000 and watch your Vue counter tick. For prod: npm run build.

If Docker's your jam, say "y" during setup, it pulls configs like docker-compose.yml, Dockerfile, and ./docker/nginx/app.conf.

Under the Hood

  • Vue 3 + Vite: Root App.vue with Composition API vibes.
  • Tailwind v3: Purged, responsive, and ready to extend.
  • Laravel 11+: Fresh install, Blade-integrated.
  • MIT Licensed: Fork, tweak, share freely.

Project structure? Clean Laravel with key tweaks in resources/js/App.vue, vite.config.js, and tailwind.config.js. Full deets in the README.

What's Next?

Star it ⭐ if it saves you time, fork for your twists, or hit me with PRs/issues. Perfect for side projects, prototypes, or teaching newbies the ropes.

Top comments (0)