Nativescript-vue: Add support for Vue Single File Components

[rigor789]

Related to #3

We should support .vue files, since they are the reason (at least for me) that make vue awesome!

Decide if .vue files can be used with JIT compilation, or only with AOT

[jlooper]

Would this help with css implementation? Currently I can use an external style sheet to style my template markup, like this:

            <scroll-view>
                <stack-layout>
                    <label class="blue">{{msg}}</label>
                    <label>##{{msg}}##</label>
                    <stack-layout orientation="horizontal">
                        <button text="Foo"></button>
                        <button text="Bar" @tap="onTap"></button>
                        <button text="Baz" style="color: red;"></button>
                    </stack-layout>
                </stack-layout>
            </scroll-view>
            <style src="./app.css"></style>

But if I want to use an external style sheet wtih .vue files, what would be the procedure?

[rigor789]

.vue files are structured like this:

<template></template>
<script></script>
<style></style>

Order doesn't matter, and multiple <style> tags are allowed!
External sheets can be included using:

<style src="path/to/css"></style>

Not sure how this will work inside {N} though!

[jlooper]

Looks like we ought to give this a test, to see if we can have this external .vue file included in our current setup - which is what we do with external .html files in Angular. Cool stuff!

[jlooper]

I attempted to import a separate component:

import OtherComponent from './component.vue';

and them use it as a component:

Components: {
OtherComponent
}

but I think my formatting of the separate vue file is wrong as I get an error that there's an unexpected '<' - it's picking up my simple template markup in the .vue file. Not sure I am formatting my external file properly. If you can tell me how it should look, I will try to import and use it

(btw I also got loops working using v-for) :)

[rigor789]

Don't think importing .vue files is possible without transpiling them into js, will probably require a hook

[NathanaelA]

@rigor789 - You should be able to use a .vue file just like .xml or the .html file that angular uses. Both angular and xml goes through the xml system, by leveraging the xml system you should be able to parse the vue files at runtime and then use them, there is really no magic to how it works...

[rigor789]

@NathanaelA I already have the parser! Does ns-angular use a build step (webpack?) to transpile into js? I'm wondering if there's a way to add "loaders" that work at runtime.