Nugsoft Developer Guides

Front-End Integration

Asset Management

Use Vite for compiling, bundling, and versioning assets (CSS, JS, images) in Laravel 9 and above. Organize assets for maintainability.

  • Place JavaScript files in resources/js and CSS files in resources/css.
  • Use npm run dev for development and npm run build for optimized production builds.
  • Use Vite's asset versioning for cache busting in production.

Example:

// vite.config.js
export default {
    build: {
        outDir: 'public/build',
    },
};

Framework Integration

Integrate Vue.js, React, or other frameworks using Vite.

  • Use components for reusable UI elements.
  • Register components in resources/js/app.js or resources/js/app.ts.
  • Use Blade to render root elements for SPA or hybrid apps.

Example:

// resources/js/app.js
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
createApp({
    components: { ExampleComponent }
}).mount('#app');

Best Practices

  • Minimize and version assets for production to improve performance and cache management.
  • Avoid inline scripts/styles in Blade templates; use external files and Vite asset helpers (@vite).
  • Use responsive design and accessibility best practices in front-end code.
  • Test front-end builds and integration as part of CI/CD.

Example: Blade Asset Usage

@vite(['resources/css/app.css', 'resources/js/app.js'])
Back to Top