Components

Introduction

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 for more information on using components.

Single-file Components

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

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

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

Instance methods and objects

Instance methods allow components to access functionality provided by internal EJS libraries, such as routing and internationalization.

Similarly, instance objects allow components to access a shared instance of a given class, such as REST Client.