Add support for Vue Single File Components

[rigor789]

Add support for Vue Single File Components

[KABBOUCHI]

Soon :)

[KABBOUCHI]

Almost done, I have 2 small bugs:

1- I lost two-way binding( only working from JS to DOM) 🙁 I'm not sure how to debug/solve the problem.

2- "after-prepare" hook not executing the transform code only at the beginning, triggering it manually do the trick (maybe we can add new command: npm run watch/dev)

I submitted a PR

[tralves]

Hi!

I got this (mostly) working. All I had to do was:

• Add webpack according to {NS} documentation.
• Add vue-loader to the webpack configuration.

Had to work through a couple of bumps, but nothing fancy.

I created this NativeScript template that bootstraps a project with webpack and .vue file support.

I think this feature is better placed on a NS template since there was nothing to do in the nativescript-vue lib itself. If we ever need to fork/change vue-loader, that will be its own project.

The <style> section still doesn't work. I created an issue in the template project. PRs are welcome! :)

[rigor789]

I think using webpack is fine, don't want to reinvent the wheel, just want to make sure that the output can be consumed properly by nativescript!

[chrisvfritz]

Hi - member of the Vue team here. I'm not very familiar with NativeScript or its build process, but I definitely recommend using vue-loader with Webpack if it's already being used for Angular integration. Vue's SystemJS support has been suspended for now as very few people were using it and it became a bit of a headache.

[BennyAlex]

@rigor789 @tralves
Any update to this? How is your experince with {N} and vue? Is it now usable well?

[rigor789]

@chrisvfritz thanks for sharing, definitely something worth looking into in the near future! :)

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

[NathanaelA]

No ns-angular does not need to use webpack (recommended for speed, but not needed). The html load runs it through there own builder that converts things into the proper ns components. For .vue files; you would parse them using the built in xml parser; then when it hit <style> tag, you would automatically append its data into the screen's css values. The <script> you would append to the exports and the tag you would convert to a or a element, and then lest the rest of the parsing be into components...

[tonyrewin]

Webpack is mentioned as the way to improve performance for iOS and it can be an easy solution to make vue -> nativescript transpiled js-bundle. Also many developers use webpack. There is no obvious answer for me why webpack loader can work or not at nativescript runtime, but why is it needed? Can try to use https://github.com/systemjs/systemjs, https://github.com/vuejs/systemjs-plugin-vue

[rigor789]

Hey @chrisvfritz I'm not very familiar with the internals of vue-loader, wondering if it's tied to vue, or can I replace it with nativescript-vue?

[smolinari]

Vue-loader is what Vue uses to transform .vue files to a JS module. I would imagine from there, you'd then take the JS module and send it through nativescript-vue?

https://vue-loader.vuejs.org/en/

Scott

[chrisvfritz]

@rigor789 Vue files can be transformed without Webpack, if that's what you mean. The same tools used in the source code could be used here. It'd simply be more work to duplicate what vue-loader already does. Am I understanding your question correctly?

[rigor789]

I'm probably overthinking it, I was just thinking if vue-loader is tied to platform specific parts of vue, since in nativescript-vue there are no html elements, just nativescript specific elements.

So If I have an entry file like main.js which requires nativescript-vue and the .vue files, and creates a root Vue instance, I can run it through vue-loader, and it will not complain that vue isn't required?

[chrisvfritz]

Ah, I think I see what you mean now. The way Webpack works, vue-loader (and other loaders) are used to specify how to process modules of specific file extensions. Unfortunately, it can't be used independently as a simple function that an entry file as an input. So if you want to process these files without Webpack, you would not use vue-loader, but rather look at its internals to see how it's working and to do something similar within NativeScript's build process.

[rigor789]

This is handled externally, see https://github.com/tralves/nativescript-vue-rollup-template

[chrisvfritz]

@rigor789 If it would be useful for this plugin to eventually have more direct access to single-file component compilation, you may be interested in vue-component-compiler, which is early in development.