The latest articles on DEV Community by Than Phan (@theweelab). https://dev.to/theweelab https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F100021%2F9019c1ce-2938-4a47-bac1-a67b46a5edac.jpg https://dev.to/theweelab en Than Phan Thu, 30 Oct 2025 09:08:03 +0000 https://dev.to/theweelab/one-liner-laravel-vuejs-setup-skip-the-boilerplate-start-coding-938 https://dev.to/theweelab/one-liner-laravel-vuejs-setup-skip-the-boilerplate-start-coding-938 <p><strong>No extra tools or libraries - just a simple script that creates a Laravel + Vue.js + Tailwind project, like the old days.</strong></p> <p>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 <strong><a href="https://github.com/Urani-Solutions/laravel-vuejs-setup" rel="noopener noreferrer">laravel-vuejs-setup</a></strong>, a dead-simple bash script that bootstraps everything in seconds. No scaffolds, no bloat - just pure, manual setup magic.</p> <h2> Why This Script? </h2> <p>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 <code>App.vue</code> (styled with Tailwind, of course). It's scaffold-free, so you control the vibe - no Breeze or Inertia unless you want 'em later.</p> <p>Bonus: Optional Docker configs for nginx, PHP-FPM, MySQL, and Supervisor. Containerize your dev env with <code>docker-compose up -d</code> and call it a day.</p> <h2> Quick Start </h2> <p>Grab it straight from GitHub—no clone needed:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>curl <span class="nt">-s</span> https://raw.githubusercontent.com/Urani-Solutions/laravel-vuejs-setup/refs/heads/main/create_laravel_vuejs.sh | bash <span class="nt">-s</span> &lt;project-name&gt; </code></pre> </div> <ul> <li> <code>&lt;project-name&gt;</code>: Your app's folder (defaults to <code>my-laravel-vue-app</code>).</li> </ul> <p>Boom! Project ready. Fire up:</p> <ul> <li><code>php artisan serve</code></li> <li><code>npm run dev</code></li> </ul> <p>Hit <code>http://localhost:8000</code> and watch your Vue counter tick. For prod: <code>npm run build</code>.</p> <p>If Docker's your jam, say "y" during setup, it pulls configs like <code>docker-compose.yml</code>, <code>Dockerfile</code>, and <code>./docker/nginx/app.conf</code>.</p> <h2> Under the Hood </h2> <ul> <li> <strong>Vue 3 + Vite</strong>: Root <code>App.vue</code> with Composition API vibes.</li> <li> <strong>Tailwind v3</strong>: Purged, responsive, and ready to extend.</li> <li> <strong>Laravel 11+</strong>: Fresh install, Blade-integrated.</li> <li> <strong>MIT Licensed</strong>: Fork, tweak, share freely.</li> </ul> <p>Project structure? Clean Laravel with key tweaks in <code>resources/js/App.vue</code>, <code>vite.config.js</code>, and <code>tailwind.config.js</code>. Full deets in the <a href="https://github.com/Urani-Solutions/laravel-vuejs-setup/blob/main/README.md#project-structure-after-setup" rel="noopener noreferrer">README</a>.</p> <h2> What's Next? </h2> <p>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.</p> webdev laravel vue