TypeScript Modules for Vue. Using namespaces with AMD loader.

Welcome.html

<div class="div__center-content">
    <div style="padding-top:1em">
        <p v-if="institution.showPersonalization==true" class="welcome__text-welcome">{{* lang.welcome.text.welcome}}{{welcomeName}}</p>
        <p class="h4 welcome__text-title">{{* lang.welcome.text.title }}</p>
        <p class="h11 welcome__text-subtitle">{{* lang.welcome.text.subTitle }}</p>
    </div>
    <checkcarousel></checkcarousel>
    <div class="h5" v-if="activeProduct.isBusinessProduct">{{ activeProduct.name }}</div>
    <div v-if="order.placedOn != ''"><span class="welcome__text-order">{{* lang.welcome.text.order }}   {{lastCheckOrderDate}} </span> | <a class="welcome__text-status" :href.once="'/express-checkout/link/orderstatus/' + linkToken" @click="status">{{* lang.welcome.text.status }}</a></div>
    <div class="pure-u-1 welcome__btn">
        <a  class="pure-button button-home pure-input-1" tabindex="1" @click="reorder">{{* lang.welcome.button.reorder }}</a>
        <a  class="pure-button button-secondary pure-input-1" tabindex="2" @click="catalog">{{* lang.welcome.button.catalog }}</a>
    </div>
    <footer class="pure-g" style="padding:0px">
        <div class="pure-u-1 home__footer center"><span @click.prevent="dumptruck">{{ version }}</span></div>
    </footer>
</div>

Welcome.js

define(["require", "exports"], function (require, exports) {
    "use strict";
    var stream;
    (function (stream) {
        var screens;
        (function (screens) {
            var Welcome;
            (function (Welcome) {
                Welcome.template = "<div class=\"div__center-content\">\n    <div style=\"padding-top:1em\">\n        <p v-if=\"institution.showPersonalization==true\" class=\"welcome__text-welcome\">{{* lang.welcome.text.welcome}}{{welcomeName}}</p>\n        <p class=\"h4 welcome__text-title\">{{* lang.welcome.text.title }}</p>\n        <p class=\"h11 welcome__text-subtitle\">{{* lang.welcome.text.subTitle }}</p>\n    </div>\n\n    <checkcarousel></checkcarousel>\n    \n    <div class=\"h5\" v-if=\"activeProduct.isBusinessProduct\">{{ activeProduct.name }}</div>\n    <div v-if=\"order.placedOn != ''\"><span class=\"welcome__text-order\">{{* lang.welcome.text.order }}   {{lastCheckOrderDate}} </span> | <a class=\"welcome__text-status\" :href.once=\"'/express-checkout/link/orderstatus/' + linkToken\" @click=\"status\">{{* lang.welcome.text.status }}</a></div>\n    <div class=\"pure-u-1 welcome__btn\">\n        <a  class=\"pure-button button-home pure-input-1\" tabindex=\"1\" @click=\"reorder\">{{* lang.welcome.button.reorder }}</a>\n        <a  class=\"pure-button button-secondary pure-input-1\" tabindex=\"2\" @click=\"catalog\">{{* lang.welcome.button.catalog }}</a>\n    </div>\n    <footer class=\"pure-g\" style=\"padding:0px\">\n        <div class=\"pure-u-1 home__footer center\"><span @click.prevent=\"dumptruck\">{{ version }}</span></div>\n    </footer>\n</div>";
                Welcome.props = ["obj", "data"];
                Welcome.data = {
                    firstName: "Ted",
                    lastName: "Patrick",
                    age: 23
                };
                Welcome.computed = {
                    fullName: function () {
                        return this.firstName + this.lastName;
                    }
                };
                Welcome.methods = {
                    nameClick: function () {
                    }
                };
            })(Welcome = screens.Welcome || (screens.Welcome = {}));
        })(screens = stream.screens || (stream.screens = {}));
    })(stream = exports.stream || (exports.stream = {}));
});

Welcome.min.js

define(["require","exports"],function(a,b){"use strict";var c;!function(a){var b;!function(a){var b;!function(a){a.template='<div class="div__center-content">\n    <div style="padding-top:1em">\n        <p v-if="institution.showPersonalization==true" class="welcome__text-welcome">{{* lang.welcome.text.welcome}}{{welcomeName}}</p>\n        <p class="h4 welcome__text-title">{{* lang.welcome.text.title }}</p>\n        <p class="h11 welcome__text-subtitle">{{* lang.welcome.text.subTitle }}</p>\n    </div>\n\n    <checkcarousel></checkcarousel>\n    \n    <div class="h5" v-if="activeProduct.isBusinessProduct">{{ activeProduct.name }}</div>\n    <div v-if="order.placedOn != \'\'"><span class="welcome__text-order">{{* lang.welcome.text.order }}   {{lastCheckOrderDate}} </span> | <a class="welcome__text-status" :href.once="\'/express-checkout/link/orderstatus/\' + linkToken" @click="status">{{* lang.welcome.text.status }}</a></div>\n    <div class="pure-u-1 welcome__btn">\n        <a  class="pure-button button-home pure-input-1" tabindex="1" @click="reorder">{{* lang.welcome.button.reorder }}</a>\n        <a  class="pure-button button-secondary pure-input-1" tabindex="2" @click="catalog">{{* lang.welcome.button.catalog }}</a>\n    </div>\n    <footer class="pure-g" style="padding:0px">\n        <div class="pure-u-1 home__footer center"><span @click.prevent="dumptruck">{{ version }}</span></div>\n    </footer>\n</div>',a.props=["obj","data"],a.data={firstName:"Ted",lastName:"Patrick",age:23},a.computed={fullName:function(){return this.firstName+this.lastName}},a.methods={nameClick:function(){}}}(b=a.Welcome||(a.Welcome={}))}(b=a.screens||(a.screens={}))}(c=b.stream||(b.stream={}))});

Welcome.ts

declare var inject:any;
export module stream.screens.Welcome {
	export let template = inject("Welcome.html");
	export let props = ["obj", "data"];
	export let data = {
		firstName: "Ted",
		lastName: "Patrick",
		age:23
	}
	export let computed = {
		fullName() {
			return this.firstName + this.lastName;
		}
	}
	export let methods = {
		nameClick() {
		}
	}
}