Getting Started

Minimal Setup for Laravel Integration

Clone & Install

git clone https://github.com/firumon/digital-business-card.git
cd digital-business-card
yarn install

Laravel Integration

Place the built assets (dist/spa/) in Laravel’s public/digital-business-card/ (or use a CDN).

Add a route in routes/web.php:

Route::get('/digital-business-card', function () {
    return view('digital_business_card');
})->name('digital_business_card');

Create a Blade view (resources/views/digital_business_card.blade.php):

<!DOCTYPE html>
<html>
    <head>
        <title>Digital Business Card</title>
        <link href="{{ asset('digital-business-card/css/index.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="q-app"></div>
        <script src="{{ asset('digital-business-card/js/app.js') }}"></script>
    </body>
</html>

First Use Case
- Use the Quasar CLI to customize the card’s content (e.g., quasar dev).
- Pass dynamic data via Laravel’s Blade variables or JavaScript:
```
<script>
    window.digitalBusinessCardData = @json($userData);
</script>
```

Implementation Patterns

Workflow: Dynamic Data Binding

Laravel ↔ Quasar Data Flow

Use Laravel’s view()->share() or Blade variables to pass data to the frontend:
```
view()->share('user', auth()->user());
```

Access in Quasar via window.Laravel or a global object:

// Quasar component (e.g., src/pages/Index.vue)
export default {
  data() {
    return {
      user: window.digitalBusinessCardData.user,
    };
  },
};

API-Driven Updates

Fetch real-time data via Laravel API routes:

// Quasar component
async fetchUserData() {
  const response = await axios.get('/api/user');
  this.user = response.data;
},

Authentication Integration

Use Laravel Sanctum/Passport for auth:

// Quasar login logic
async login() {
  const response = await axios.post('/api/login', {
    email: this.email,
    password: this.password,
  });
  this.$q.localStorage.set('token', response.data.token);
},

Integration Tips

Asset Optimization: Use Laravel Mix/Vite to bundle Quasar assets with Laravel’s frontend.
Routing: Proxy Quasar routes through Laravel’s Route::fallback() for SPA behavior:
```
Route::fallback(function () {
    return view('digital_business_card');
});
```

Theming: Override Quasar’s CSS variables in Laravel’s app.scss:

// Override Quasar colors
:root {
  --primary: #{{ config('digital_business_card.primary_color') }};
}

Gotchas and Tips

Pitfalls

CORS Issues

If using API routes, ensure Laravel’s CORS middleware (fruitcake/laravel-cors) is configured:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:8080'], // Quasar dev server

Asset Paths in Production
- Quasar’s quasar build generates assets in dist/spa/. Ensure Laravel’s public folder symlinks or copies these files:
```
ln -s /path/to/digital-business-card/dist/spa /path/to/laravel/public/digital-business-card
```
Hot-Reloading Conflicts
- Quasar’s quasar dev and Laravel’s Vite/HMR may conflict. Use separate ports or disable one during development.

Debugging

Quasar DevTools: Use Chrome DevTools to inspect Quasar’s Vue components.
Laravel Logs: Check storage/logs/laravel.log for API/route errors.
Network Tab: Verify API calls in Chrome DevTools → Network tab.

Extension Points

Custom Components

Extend Quasar’s src/components/ with reusable Laravel-integrated components (e.g., ContactForm.vue):

<template>
  <q-form @submit="submitForm">
    <q-input v-model="email" label="Email" />
    <q-btn type="submit">Submit</q-btn>
  </q-form>
</template>
<script>
export default {
  methods: {
    async submitForm() {
      await axios.post('/api/contacts', { email: this.email });
    },
  },
};
</script>

Laravel Service Providers

Bind Quasar config to Laravel’s container:

// app/Providers/AppServiceProvider.php
public function boot() {
  config(['digital_business_card.primary_color' => '#42b983']);
}

WebSocket Integration

Use Laravel Echo + Pusher to sync real-time updates (e.g., notifications):

// Quasar component
import Echo from 'laravel-echo';
const echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
});
echo.channel('notifications')
  .listen('NotificationEvent', (data) => {
    this.$q.notify(data.message);
  });

Digital Business Card Laravel Package