> 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.1/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 %}

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

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

## Instance methods

The EJS environment makes several **instance methods** available within component definitions.  These methods provide access to core functionality, such as [routing](/ejs/1.1/guide/routing.md) and [translations](/ejs/1.1/guide/internationalization.md).

All instance methods are available as properties on `this` within a component and are prefixed with the dollar symbol ($).

### $getRoute() : CompiledRoute

The **$getRoute()** instance method returns a compiled route object, representing the [route](/ejs/1.1/guide/routing/routes.md) currently matched in the address bar.

The compiled route object is useful for looking up matched [parameter](/ejs/1.1/guide/routing/routes.md#parameters) values, reading [metadata](/ejs/1.1/guide/routing/routes.md#metadata) from the route definition, and determining the relative position in the [routing tree](/ejs/1.1/guide/routing/route-collections.md).

### $generatePath(string routeName, Object params) : string

The **$generatePath** instance method makes it possible to [generate](/ejs/1.1/guide/routing/path-generation.md) the absolute path to any [route](/ejs/1.1/guide/routing/routes.md) using its name and [parameters](/ejs/1.1/guide/routing/routes.md#parameters).  Using this method ensures all links are automatically updated whenever a route is changed.

Alternatively, you may use a [view link](/ejs/1.1/guide/routing/view-links.md) within your component templates to generate routes declaratively.

### $translate(string stringId, Object args) : string

The **$translate** instance method provides access to translations from the [internationalization](/ejs/1.1/guide/internationalization.md) library.  It accepts the identifier for a [string resource](/ejs/1.1/guide/escl/string-resources.md) and an object containing key-value pairs representing variables to replace in the processed string.

The translations are performed based on the currently set [active locale](/ejs/1.1/guide/internationalization/locales.md#active-locale).

### $setLocale(string localeCode) : void

The **$setLocale** instance method is used to set the [active locale](/ejs/1.1/guide/internationalization/locales.md#active-locale).  Changing the active locale automatically loads the appropriate [language packs](/ejs/1.1/guide/internationalization/language-packs.md) and performs all necessary translations.