Skip to content
.NET library for converting and bundling Vue.js Single File Components (.vue files) into plain JavaScript
Branch: master
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.
src Compiled JavaScript function returns Vue.js options object instead of… Apr 18, 2019
.gitignore first commit Apr 14, 2019
LICENSE.md first commit Apr 14, 2019
README.md

README.md

VueFilesToJS

This tiny library (.NET Framework 4.5) is used to convert and bundle Vue.js Single File Components (.vue files) into into plain JavaScript - without Node, Webpack, etc.

It can be used in any type of .NET project. For example for dynamic rendering of .vue files under ASP.NET, for making a simple command line compiler for .vue files, etc.

It has no dependencies.

How to use

Download the "VueFilesToJS.dll" file and reference this in your .NET project.

Then in your code, simply call the VueFilesToJS.Compile function to generate plain JavaScript from one or more .vue files.

The VueFilesToJS.Compile function takes 3 or 4 arguments:

  1. The file system path to the root of your web-site.
    For example: "c:\web-sites\blog"
  2. The .vue file to compile in relative URL form.
    For example: "/vue-components/my-app.vue"
    Note: you only specify the "root" .vue file. Any referenced .vue files (import) and script source files (src) will automatically be included as well.
  3. The JavaScript function name that you want to reference the resulting script by.
    For example: "GetVueOptions"
  4. Optional Boolean value (default True) indicating if all white space in templates should be squashed (sequences of space, <LF>, <CR>, <Tab> are replaced with a single space).

The output of the Compile function is a sting with a JavaScript function which returns a Vue.js application/component options object.

Next you need to render this script to a webpage (which also references the full Vue.js library), get the Vue options object by calling the JavaScript function (with the name from argument 3 above), and finally initiate a Vue.js app or component using this.

Here's an example of doing this on an ASP.NET Web Forms page:

<div id="app"></div>
<script>
<%=VueFilesToJS.Compile("c:\website", "app.vue", "GetVueOptions")%>
var opt = GetVueOptions();
var app = new Vue(opt);
app.$mount('#app');
<script>

It would obviously improve performance to cache the "compiled" script in memory or save it to a static ".js" file, so that it wouldn't need to be compiled for every client request.

Requirements / limitations for .vue files

The following .vue file layout is supported:

  • The .vue file(s) must have one <template> section followed by one <script> section, and NO <style> section (scoped style is not supported).

  • The <script> section may reference an external JavaScript script file like this:
    <script src="file.js"></script>

  • The script (contained in or referenced by the <script> section) must be plain JavaScript. However, the src option mentioned above makes it possible to use TypeScript and other languages that compile to plain JavaScript.

  • The script may only contain one or more import statements (to include other .vue files as components) followed by a single export default {...} statement.

  • Each script import statement must follow the exact format:
    import Name from 'file.vue';

An example of a valid .vue file:

<template>
  <dog :name="DogName">
</template>

<script>
import dog from 'dog.vue';
export default {
    data: { DogName: "Fido" },
    components: { "dog": dog }
};
</script>

Background for project

See my blog post.

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...

You can’t perform that action at this time.