# 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](https://docs.elentra.org/ejs/1.1/guide/routing) and [translations](https://docs.elentra.org/ejs/1.1/guide/internationalization).

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](https://docs.elentra.org/ejs/1.1/guide/routing/routes) currently matched in the address bar.

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

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

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

Alternatively, you may use a [view link](https://docs.elentra.org/ejs/1.1/guide/routing/view-links) 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](https://docs.elentra.org/ejs/1.1/guide/internationalization) library.  It accepts the identifier for a [string resource](https://docs.elentra.org/ejs/1.1/guide/escl/string-resources) 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](https://docs.elentra.org/ejs/1.1/internationalization/locales#active-locale).

### $setLocale(string localeCode) : void

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