JavaScript and Vite

Table of contents

  1. Overview
  2. Vite Asset Bundling
  3. 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 included via your views by including the following in the head block:

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


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

Running above commands in Windows PowerShell can cause an issue. Make sure to run with Command Prompt.


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