# Vue.js Setup for Laravel

This project has been configured with Vue.js 3 and Vite for modern frontend development.

## What's Been Set Up

- ✅ Vue.js 3.4+ installed
- ✅ Vite configured with Vue plugin
- ✅ Sample Vue components created
- ✅ Tailwind CSS integration
- ✅ Laravel Blade view for Vue app
- ✅ Routes configured

## Project Structure

```
resources/
├── js/
│   ├── app.js              # Main Vue entry point
│   ├── App.vue             # Root Vue component
│   └── components/         # Vue components directory
│       └── ExampleComponent.vue
├── views/
│   └── app.blade.php       # Blade template for Vue app
└── css/
    └── app.css             # Tailwind CSS
```

## Development Commands

### Start Development Server
```bash
npm run dev
```

### Build for Production
```bash
npm run build
```

### Watch for Changes
```bash
npm run dev
```

## How to Use

1. **Start the development server:**
   ```bash
   npm run dev
   ```

2. **In another terminal, start Laravel:**
   ```bash
   php artisan serve
   ```

3. **Visit your application:**
   - Main app: `http://localhost:8000/`
   - Vue app: `http://localhost:8000/app`

## Creating New Components

1. Create new `.vue` files in `resources/js/components/`
2. Import them in your parent components
3. Register them in the `components` section

Example:
```vue
<script>
import MyComponent from './components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>
```

## Features

- **Hot Module Replacement (HMR)** - Changes reflect immediately
- **Vue 3 Composition API** - Modern Vue.js features
- **Tailwind CSS** - Utility-first CSS framework
- **Component-based architecture** - Reusable Vue components
- **Laravel integration** - Seamless backend integration

## Troubleshooting

- If you see build errors, run `npm install` to ensure all dependencies are installed
- Make sure Vite is running (`npm run dev`) when developing
- Check browser console for any JavaScript errors
- Ensure your Laravel server is running (`php artisan serve`)

## Next Steps

1. Start building your Vue components
2. Add more routes in `routes/web.php`
3. Create API endpoints in `routes/api.php`
4. Add state management (Pinia/Vuex) if needed
5. Configure authentication if required