> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/1.0/guide/modules/components.md).

# Components

## Introduction <a href="#introduction" id="introduction"></a>

ElentraJS supports custom, reusable components by leveraging the VueJS library. A component is simply a self-contained triad of HTML, JavaScript, and CSS that can be represented by a custom HTML tag.

Check out the [VueJS documentation](https://vuejs.org/v2/guide/components.html) for more information on using components.

## Single-file Components <a href="#single-file-components" id="single-file-components"></a>

ElentraJS provides on-the-fly code-splitting and compilation of VueJS components defined in a single file. This allows the component author to include the entire component definition in one file, resulting in two-thirds fewer server requests.

### Syntax <a href="#syntax" id="syntax"></a>

Single-file components are defined using simple HTML syntax in a file with a .vue extension.

```
<!-- MyComponent.vue -->
<template>
    <div class="my-component">I'm a component template!</div>
</template>

<script>
    module.exports = {
        name: 'my-component'
    };
</script>

<style>
    .my-component {
        width:100%;
        color:blue;
    }
</style>
```

### Known Limitations <a href="#known-limitations" id="known-limitations"></a>

EJS does not currently support scoped or pre-processed CSS in component definitions.