crowd-funder-for-time-pwa/qr-code-implementation-guide.md

Build Configuration

Common Vite Configuration

// vite.config.common.mts
export async function createBuildConfig(mode: string) {
  const isCapacitor = mode === "capacitor";
  
  return defineConfig({
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'vue-vendor': ['vue', 'vue-router', 'vue-facing-decorator']
          }
        }
      }
    },
    define: {
      __USE_QR_READER__: JSON.stringify(!isCapacitor),
      __IS_MOBILE__: JSON.stringify(isCapacitor),
    },
    optimizeDeps: {
      include: [
        '@capacitor-mlkit/barcode-scanning',
        'vue-qrcode-reader'
      ]
    },
    resolve: {
      alias: {
        '@capacitor/app': path.resolve(__dirname, 'node_modules/@capacitor/app')
      }
    }
  });
}

Web-Specific Configuration

// vite.config.web.mts
import { defineConfig, mergeConfig } from "vite";
import { createBuildConfig } from "./vite.config.common.mts";

export default defineConfig(async () => {
  const baseConfig = await createBuildConfig('web');
  
  return mergeConfig(baseConfig, {
    define: {
      __USE_QR_READER__: true,
      __IS_MOBILE__: false,
    }
  });
});

Capacitor-Specific Configuration

// vite.config.capacitor.mts
import { defineConfig, mergeConfig } from "vite";
import { createBuildConfig } from "./vite.config.common.mts";

export default defineConfig(async () => {
  const baseConfig = await createBuildConfig('capacitor');
  
  return mergeConfig(baseConfig, {
    define: {
      __USE_QR_READER__: false,
      __IS_MOBILE__: true,
    },
    build: {
      rollupOptions: {
        external: ['vue-qrcode-reader'], // Exclude web QR reader from mobile builds
        output: {
          entryFileNames: '[name]-mobile.js',
          chunkFileNames: '[name]-mobile.js',
          assetFileNames: '[name]-mobile.[ext]'
        }
      }
    }
  });
});

Build Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "build:web": "vite build --config vite.config.web.mts",
    "build:capacitor": "vite build --config vite.config.capacitor.mts",
    "build:all": "npm run build:web && npm run build:capacitor"
  }
}

Environment Variables

Create a .env file:

# QR Scanner Configuration
VITE_QR_SCANNER_ENABLED=true
VITE_DEFAULT_CAMERA=back

Build Process

1. Web Build

npm run build:web

This will:

• Include vue-qrcode-reader
• Set USE_QR_READER to true
• Set IS_MOBILE to false
• Build for web browsers

2. Capacitor Build

npm run build:capacitor

This will:

• Exclude vue-qrcode-reader
• Set USE_QR_READER to false
• Set IS_MOBILE to true
• Build for mobile platforms

3. Build Both

npm run build:all

Important Notes

1. Dependencies

• Ensure all QR-related dependencies are properly listed in package.json
• Use exact versions to avoid compatibility issues
• Consider using peer dependencies for shared libraries

2. Bundle Size

• Web build includes vue-qrcode-reader (~100KB)
• Mobile build includes @capacitor-mlkit/barcode-scanning (~50KB)
• Consider using dynamic imports for lazy loading

3. Platform Detection

• Build flags determine which implementation to use
• Runtime checks provide fallback options
• Environment variables can override defaults

4. Performance

• Mobile builds optimize for native performance
• Web builds include necessary polyfills
• Chunk splitting improves load times

5. Debugging

• Source maps are enabled for development
• Build artifacts are properly named for identification
• Console logs help track initialization