We would like to pre compile templates to improve nativescript app performance, and eliminate the need to parse and compile templates on the device.

The best case scenario for this loader is to be able to chain it with the official vue-loader, so we don't have to keep updating it from the official repo.

nativescript-vue-loader -> vue-loader -> other loaders -> build

This loader has to support (all optional) multiple templates (web/native/android/ios), multiple scripts (script - shared, script native, script web, script android, script ios) and multiple styles.

Based on the target platform we have to parse a .vue file (using nativescript-vue-template-compiler), and then build out another valid .vue file that we pass on to vue-loader to handle.

Case 1: only targetting nativescript

The .vue file is as follows:

<template></template> 
<template android/ios></template> 

<script></script>
<script android></script>
<script ios></script>

<style></style>
<style android></style>
<style ios></style>

First step (for all targets) is to parse the .vue file into block descriptors.

build target: android
First, we pick the template

• if <template android /> exists we use it
• else we use <template> (if exists)

Second we pick the <script>,

Third, if <script android> exists, we create a custom block <mixin>

Fourth, we pick the <style> block, and if <style android> exists we merge it's contents into the <style> block (taking care of cases where only <style android> exists too!)

Finally we assemble a new .vue file (in memory) as follows:

<template /> <!-- either from template:android or regular template -->
<script />
<mixin /> <!-- if script:android existed -->
<style /> <!-- contains base style + android only style -->

Once the assemble phase is done, we are done with the .vue loader.

build target: ios
Same as android.

We also need to create a loader for the mixin block as a runtime block.

This is documented here: https://vue-loader.vuejs.org/en/configurations/custom-blocks.html#runtime-available-docs

pseudo code example:

module.exports = function (source, map) {
  this.callback(null, `

var mixin = require( webpack string that runs the source throu babel etc. )

module.exports = function(Component) {
  Component.options.mixins.push(mixin)
}
`, map)
}

Things to solve

We have to compile the templates using the nativescript-template-compiler, which I'm not sure we can do easily, at least not using the <template> block. A custom block (like <nativescript-vue-template/>) could take care of it, in a similar way as the <mixin> block above.

@yyx990803 posted a gist of an upcoming vue-loader version that simplifies how loaders are resolved, which inspired this write up. We can most likely use the features provided by the next version.
https://gist.github.com/yyx990803/e0f4f1275841f4ce756b8c1ac1db76e9