Vue Light .NET Compiler - A Vue.js template to JavaScript compiler (sub-set for rendering only / no reactivity)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
sample-web-site
src
.gitignore
LICENSE.md
README.md

README.md

Vue Light .NET Compiler

A .NET based Vue.js template to JavaScript compiler (sub-set for rendering only / no reactivity).

It takes a Vue.JS template string and converts it into JavaScript (extremely light weight), which can then render HTML in a browser based on that template.

There are NO JavaScript files to be referenced on your web page.

The compiled code consists of a single JavaScript function which you can call with a data object to render HTML - like this:

<script>
    var data={ name:"Joe", cars:["Toyota","Pontiac","Saab"]};
    var render=<%=VueLight.Compiler.Compile(template)%>;
    document.write(render(data));
</script>

The purpose of this is to make it possible to use the Vue.js template format without the Vue.js library for simple client side rendering scenarios. This way you can use one template format (Vue.js) for everything - and only have to feed the Vue.js library to clients in more advanced scenarios.

We have also published a separate project specifically for using this compiler with ASP.NET Web Forms - see https://github.com/jesperhoy/VueLightWebForms
This included 3 ASP.NET Web Form controls which make it easier to use Vue.js as well as this compiler.

How to use

Download the "VueLight.dll" file and reference it in your .NET application - or drop this into your ASP.NET web site's "bin" folder.

Note this project is configured for .NET Framework 4.5, but can easily be compiled for other .NET scenarios (standard, core, etc.).

You can invoke the compiler using:

javascript = VueLight.Compiler.Compile(template[,options])

The Compile method takes an optional options argument of the CompilerOptions type, which has a single (so far) property Components of the Dictionary<String, String> type. You can add component element tag names to this, each referencing the name of a JavaScript render function.

The output is a JavaScript function:

function(_data) {...}

In order to use this on a web-page, you would typically write something like:

var RenderThing = <output of the Compile method>;
document.write(RenderThing(mydata));

Component render functions are expected to have the same signature (a single data argument), which makes it easy to chain components and a main render function.

See ASP.NET Web Forms example

Vue.js features implemented in the compiler

The compiler supports a sub-set of the Vue.js template features. It basically provides rendering only with no reactivity.

Specifically the following Vue.js template features are supported:

  • {{expression}}

    Render encoded result of JavaScript expression. Fully implemented.

  • v-if="expression" / v-else-if="expression" / v-else

    Conditional rendering. Fully implemented

  • v-for="x in expression" / v-for="(x,i) in expression"

    A for loop is executed depending on the value type returned by the JavaScript expression:

    • Array: Iterate through the elements of the array.
    • Number: Repeat this number of times (x = 1...N).

    A v-bind:key / :key attribute in the same element is removed (not used).

    Does not support objects (in Vue.js it is also possible to iterate through the properties of an Object).

  • v-bind:name="expression" / :name="expression"

    Bind an attribute to a JavaScript expression.

    The attribute is rendered depending on the value type returned by the JavaScript expression:

    • String: The attribute is rendered with the value encoded (name="encoded-value").
    • Number: The attribute is rendered directly (name="value").
    • Boolean: The attribute (with no value) is rendered only if the expression evaluates to true.
    • Array ("class" attribute only): Each element in the array is rendered space separated (name="value value value").

    Does not support general object types (in Vue.js objects can be used in class and style attributes).

  • v-show="expression"

    Sets the element's style display value depending on the boolean result of the JavaScript expression.

    Does not support the style attribute being bound at the same time, and any (static) style attribute must not already contain a display value.

  • v-text="expression"

    Render encoded result of JavaScript expression as element content. Fully implemented.

  • v-html="expression"

    Render result of JavaScript expression as raw HTML as element content. Fully implemented.

  • v-pre

    Skip compilation for element and children. Fully implemented.

  • v-once

    Only render once. Simply removed since reactivity is not implemented.

  • v-cloak

    Used for pre-compilation CSS purposes. Simply removed since it is not relevant in this context (template pre-compiled).

  • <template> tags

    Content is rendered and Vue.js attributes are evaluated (v-if, v-for, etc.) but the tag itself is not rendered.

  • Notably NOT supported

    • Component content (work in progress)
    • v-model
    • v-on:event / @event

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributions

Contributions are most welcome. No contribution is too big or too small.

Fork this repository, clone locally, make your updates, commit, push, create a pull request in GitHub...