Digital Business Card Laravel Package

Getting Started

Minimal Setup for Laravel Integration

1. Clone & Install

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

2. 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>
     

3. 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

1. 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,
         };
       },
     };
     

2. 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;
     },
     

3. 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

1. 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
     

2. 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
     

3. 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

1. 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>
     

2. Laravel Service Providers

   • Bind Quasar config to Laravel’s container:

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

3. 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);
       });