JavaScript and Vite

Table of contents

  1. Overview
  2. app.js
  3. Vite Asset Bundling
  4. Included JavaScript Files


1. Overview Table of Contents

This framework includes first-class JavaScript support using Vite, enabling you to write modular, modern JavaScript while enjoying fast development builds and efficient production asset bundling.

The resources/js directory includes helpful built-in utilities and serves as your starting point for writing and organizing all JavaScript logic.

Common use cases already supported include:

  • ✅ Front-end password confirmation validation
  • ✅ Phone number formatting helpers
  • ✅ TinyMCE rich text editor configuration

These can be imported directly in app.js or included via your views.


2. app.js Table of Contents

The entry point for your custom JavaScript is located at:

  • resources/js/app.js

Use this file to:

  • Import utility functions or packages
  • Initialize form validation
  • Configure TinyMCE
  • Write view-specific scripts (e.g., document ready)

✳️ Example

import './phoneFormat.js';
import './passwordMatch.js';

document.addEventListener('DOMContentLoaded', () => {
  console.log('App.js loaded');

  // Example: Hook into a custom button
  const button = document.querySelector('#myButton');
  if (button) {
    button.addEventListener('click', () => alert('Clicked!'));
  }
});

You can split your code into modules and import them here. Vite will compile it all into a single optimized bundle.


3. Vite Asset Bundling Table of Contents

This framework includes the ability to perform Vite asset bundling. Run the following command to bundle your assets:

npm run build

Vite is also used to provide live updates of your views after saving a view file. Run the following command to use this feature:

npm run dev

After running the command the npm based Vite server is started just like any Laravel or React.js based project.


4. Included JavaScript Files Table of Contents

This framework comes with two JavaScript files that can be found at resources\js:

  • TinyMCE.js - Initializes TinyMCE editor
  • frontEndPasswordMatchValidate.js - Ensures passwords match

TinyMCE

You will need to add the following to your view’s head:

<script src='<?=Env::get('APP_DOMAIN', '/')?>resources/js/TinyMCE.js'></script>

Then add the following script to the bottom of the body:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        initializeTinyMCE('description');
    });
</script>