> 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.3/guide/modules/components.md).

# Components

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

EJS 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>

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

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

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

{% code title="MyComponent.vue" %}

```markup
<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>
```

{% endcode %}

{% hint style="warning" %}

### Known Limitations

EJS does not currently support scoped or pre-processed CSS in component definitions.
{% endhint %}

## Instance methods and objects

[Instance methods](/ejs/1.3/guide/plugins/core-plugins/instance-methods.md) allow components to access functionality provided by internal EJS libraries, such as [routing](/ejs/1.3/guide/routing.md) and [internationalization](/ejs/1.3/guide/internationalization.md).

Similarly, [instance objects](/ejs/1.3/guide/plugins/core-plugins/instance-objects.md) allow components to access a shared instance of a given class, such as [REST Client](/ejs/1.3/guide/http-library/rest-client.md).