> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/features/single-file-components.md).

# Single-file Components

[Components](/the-essentials/components.md) are typically built with a **.bx and a .bxm file (Boxlang )** or a **.cfc file and a .cfm file (CFML)**. You can combine these into a single .bxm or .cfm file, similar to how components in Vue.js are built.

Let's look at the example from the [introduction](/readme.md) that uses two separate files.

{% tabs %}
{% tab title="BoxLang" %}

```javascript
// ./wires/Counter.bx
class extends="cbwire.models.Component" {   
    data = {
        "counter": 0
    };
    
    function onMount() {
        // Load the counter from the session
        data.counter = session.counter ?: 0;
    }
    
    function save( counter ) {
        // Save the counter to the session
        session.counter = arguments.counter;
    }
}
```

{% endtab %}

{% tab title="CFML" %}

```javascript
// ./wires/Counter.cfc
component extends="cbwire.models.Component" {   
    data = {
        "counter": 0
    };
    
    function onMount() {
        // Load the counter from the session
        data.counter = session.counter ?: 0;
    }
    
    function save( counter ) {
        // Save the counter to the session
        session.counter = arguments.counter;
    }
}
```

{% endtab %}
{% endtabs %}

```html
<!--- ./wires/counter.bxm|cfm --->
<div
    x-data="{
        counter: $wire.counter,
        increment() {
            this.counter++   
        },
        async save() {
            // Call the save method on our component
            await $wire.save( this.counter );
        }
    }"
    wire:ignore.self>
    <div>Count: <span x-text="counter"></span></div>
    <button @click="increment">+</button>
    <button @click="save">Save</button>
</div>
```

## Single File Format

Let's combine these into a single file.

{% tabs %}
{% tab title="BoxLang" %}

```html
<!--- ./wires/counter.bxm --->
<bx:script>
    // @startWire
    data = {
        "counter": 0
    };
    
    function onMount() {
        // Load the counter from the session
        data.counter = session.counter ?: 0;
    }
    
    function save( counter ) {
        // Save the counter to the session
        session.counter = arguments.counter;
    }
    // @endWire
</bx:script>

<bx:output>
    <div
        x-data="{
            counter: $wire.counter,
            increment() {
                this.counter++   
            },
            async save() {
                // Call the save method on our component
                await $wire.save( this.counter );
            }
        }"
        wire:ignore.self>
        <div>Count: <span x-text="counter"></span></div>
        <button @click="increment">+</button>
        <button @click="save">Save</button>
    </div>
</bx:output>
```

{% endtab %}

{% tab title="CFML" %}

```html
<!--- ./wires/counter.cfm --->
<cfscript>
    // @startWire
    data = {
        "counter": 0
    };
    
    function onMount() {
        // Load the counter from the session
        data.counter = session.counter ?: 0;
    }
    
    function save( counter ) {
        // Save the counter to the session
        session.counter = arguments.counter;
    }
    // @endWire
</cfscript>

<cfoutput>
    <div
        x-data="{
            counter: $wire.counter,
            increment() {
                this.counter++   
            },
            async save() {
                // Call the save method on our component
                await $wire.save( this.counter );
            }
        }"
        wire:ignore.self>
        <div>Count: <span x-text="counter"></span></div>
        <button @click="increment">+</button>
        <button @click="save">Save</button>
    </div>
</cfoutput>
```

{% endtab %}
{% endtabs %}

There are only a few differences with the single-file format.

* The contents of your **.cfc** file are instead placed inside a **\<cfscript>** block
* The **// @startWire** and **// @endWire** comment markers have been added so that CBWIRE can parse the file.

{% hint style="warning" %}
You must add the **//@startWire** and **//@endWire** markers when using single-file format.
{% endhint %}

{% hint style="info" %}
You can place your **\<cfscript>** block above or below your template. CBWIRE parses this out before processing.
{% endhint %}

## Performance

There is a slight performance hit when using the single file format because CBWIRE has to parse out the sections of your file. However, this hit is minimal because of the internal caching CBWIRE uses.

{% hint style="info" %}
Cached files can be found under **./modules/cbwire/models/tmp**. This directory gets cleared anytime you reinit your application using ColdBox's **fwreinit**.

<http://myapp/?fwreinit=true>
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cbwire.ortusbooks.com/features/single-file-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.