v4
Install Source Code Issues Support

Getting Started

Every journey starts somewhere.

Requirements

  • Adobe ColdFusion 2021+ or Lucee 5+

  • ColdBox 6+

Installation

Install CommandBox.

Within the root of your project, run:

box install cbwire@4

If you want the latest bleeding edge, run:

box install cbwire@be

CSS and JavaScript

For CBWIRE to work, your layout must include some CSS and the Livewire JavaScript library. CBWIRE 4 automatically adds these to your ColdBox layout file, requiring no additional changes.

Previous versions of CBWIRE required you to do this manually.

CBWIRE will automatically inject these assets for you.

<!doctype html>
<html>
<head>
	<!-- CBWIRE Styles -->
	<style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
</head>
<body>
	<!-- CBWIRE SCRIPTS -->
	<script src="/modules/cbwire/includes/js/livewire.js?id=239a5c52" data-csrf="IwMh5yVu4bmvvh3krQjW50jdNHLPBQ6Ln7QLWEyc" data-update-uri="/cbwire/update" data-navigate-once="true"></script>
</body>
</html>

If you want to disable this functionality and manually include the CSS and JavaScript yourself, you can set the autoInjectAssets setting to false in your ColdBox.cfc.

// config/ColdBox.cfc
moduleSettings = {
    "cbwire" : {
        "autoInjectAssets": false
    }
};

Then, you can manually add the CSS and JavaScript using the wireStyles() and wireScripts() methods in your layout file.

<!--- ./layouts/Main.cfm --->
<cfoutput>
<!DOCTYPE html>
<html>
    <head>
        <!--- CBWIRE CSS --->
        #wireStyles()#
    </head>
    <body>
        <!--- CBWIRE JS --->
        #wireScripts()#
    </body>
</html>
</cfoutput>

It is essential for the CSS and JavaScript to be included in your template, other CBWIRE will not work. If you are trying to use CBWIRE and it's not working as expected, this is the first place to check.

Next Steps

We recommend starting with the Components page to learn more about creating your own components.

PreviousIntroductionNextConfiguration

Last updated