Components

Introduction

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

Single-file Components

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

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.