Laravel + Vue.js Setup Script with Vite & Tailwind CSS

This script automates the setup of a new Laravel project integrated with pure Vue.js (v3), Vite (as the bundler), and Tailwind CSS for styling. It's designed for developers who want a manual, scaffold-free setup without using Laravel Breeze, Jetstream, or Inertia.js.

Features

• Creates a fresh Laravel project.
• Installs Vue.js 3 and the Vite Vue plugin (compatible with Vite 7).
• Configures Vite for hot module replacement (HMR).
• Sets up Tailwind CSS v3 with PostCSS and Autoprefixer (avoids v4 init issues).
• Includes a root App.vue component with a simple interactive counter demo styled with Tailwind.
• Updates the default welcome page to mount the Vue app.
• Optional: Downloads Docker configs for nginx, PHP, MySQL, and Supervisor for containerized development.

Prerequisites

• PHP 8.2+ with Composer.
• Node.js 18+ with npm.
• Git (optional, for repo management).
• curl and bash (for direct script execution).
• For Docker: Docker and Docker Compose installed.

Usage

You can run the script directly from GitHub without downloading it (one-liner), or download it first for more control.

Option 1: Direct Execution (No Download)

Run the script directly via curl and pipe to bash (includes the project name, optional Laravel port, and optional Vite port):

curl -s https://raw.githubusercontent.com/Urani-Solutions/laravel-vuejs-setup/refs/heads/main/create_laravel_vuejs.sh | bash -s my-project

• Arguments: <project-name> [laravel-port] [vite-port]
  • Defaults: my-laravel-vue-app
• Note: This is convenient but less secure—review the script source first if concerned.

Option 2: Download and Run (Safer for Review)

1. Download the script:

   curl -O https://raw.githubusercontent.com/Urani-Solutions/laravel-vuejs-setup/refs/heads/main/create_laravel_vuejs.sh

2. Run the script with arguments:

   ./setup-laravel-vue.sh my-project

   • Defaults to my-laravel-vue-app (project) if not provided.

3. Follow the on-screen instructions:

   • The script will create the project and configure everything.
   • Start the Laravel dev server: php artisan serve --port=8000.
   • In a new terminal, build/watch assets: npm run dev -- --port=5173.
   • Open http://127.0.0.1:8000 to see the Vue app in action.

For production:

npm run build

Docker Setup (Optional)

During script execution, you'll be prompted: "Do you want to download Docker configuration files (nginx, php, db, supervisord) to run the project with Docker? (y/n)"

If you select y:

• Docker files will be downloaded to the project root.
• Key files include: docker-compose.yml, Dockerfile, .env, supervisord.conf, and configs in ./docker/ (nginx/app.conf, nginx/Dockerfile, php/local.ini, php/www.conf).

To run with Docker:

1. Run: docker-compose up -d (builds and starts services: nginx, PHP-FPM, MySQL, Supervisor).
2. Run migrations: docker-compose exec php php artisan migrate.
3. For Vite assets: npm run dev.
4. Access at http://localhost:9000 (or your configured port).

Stop with: docker-compose down.

Project Structure (After Setup)

The script generates a standard Laravel structure with the following key additions/modifications for Vue.js, Vite, and Tailwind:

my-laravel-vue-app/
├── app/                     # Laravel app logic (controllers, models, etc.)
├── bootstrap/               # Laravel bootstrap files
├── config/                  # Laravel config
├── database/                # Migrations, factories, seeders
├── docker/                  # Docker configs (if selected)
│   └── nginx/
│   │   ├── app.conf
│   │   └── Dockerfile
│   └── php/
│       ├── local.ini
│       └── www.conf
├── public/                  # Public assets (index.php, etc.)
├── resources/
│   ├── css/
│   │   └── app.css          # Tailwind directives (@tailwind base; etc.)
│   ├── js/
│   │   ├── app.js           # Vue app entry point (imports App.vue)
│   │   ├── App.vue          # Root Vue component (counter demo with Tailwind)
│   │   └── bootstrap.js     # Laravel JS bootstrap (Axios, etc.)
│   └── views/
│       └── welcome.blade.php # Mounts Vue app (#app div with @vite)
├── routes/                  # Routes (web.php, etc.)
├── storage/                 # Logs, framework cache
├── tailwind.config.js       # Tailwind config (content paths for Blade/JS/Vue)
├── vite.config.js           # Vite config (Laravel + Vue plugins)
├── package.json             # Node dependencies (Vue, Tailwind, etc.)
├── postcss.config.js        # PostCSS config (for Tailwind)
├── docker-compose.yml       # Docker Compose (if selected)
├── Dockerfile               # App Dockerfile (if selected)
├── .env                     # Env (if selected)
├── supervisord.conf         # Supervisor config (if selected)
├── composer.json            # PHP dependencies
└── ... (other standard Laravel files)

Customization

• Vue Components: Add more components in resources/js/ and import them in app.js.
• Tailwind: Extend tailwind.config.js for custom themes.
• Routes: Update routes/web.php to render other Blade views with Vue mounts.
• Docker: Customize docker-compose.yml for additional services or volumes.

Troubleshooting

• npm ERESOLVE (dependency conflicts): Ensure Node.js 22+; the script pins compatible versions (@vitejs/plugin-vue@^6.0.0 for Vite 7).
• npx tailwindcss init error: Script uses Tailwind v3 to avoid v4 CLI changes; if issues, run npm cache clean --force before setup.
• Other npm errors: Delete node_modules and package-lock.json, then rerun npm install.
• Vite HMR not working: Check npm run dev output for errors. Ensure ports are free.
• Docker issues: Ensure Docker is running; check logs with docker-compose logs.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Feel free to fork, improve, and submit pull requests! Contributors include:

• Urani Solutions

---

⭐ Star this repo if it helps you get started quickly!