Starting with Nativescript and seting up to use Coffeescript, Pug and Stylus

nativescript.md

Nativescript

The standard version of Nativescript uses XML, JS and SCSS, no matter the selected framework.

In my case I like to use Pug, Coffeescript and Stylus with VueJS.

Bellow is the process to configure the CLI to use this combination:

# while nativescript uses NPM internally I like to use Yarn, so my global is installed with it.
# Use `npm install -g nativescript` if you prefer to.
yarn global add nativescript

# create your app using VueJS, use any appID you want
tns create MyApp --vue --appid com.domain.myapp

cd MyApp

# install our new development dependencies
# since internally nativescript uses NPM always, here is a good idea to use it too
# instead of yarn (if is your case)
npm install -D stylus stylus-loader coffeescript coffee-loader pug pug-plain-loader

Edit webpack.config.js and add following block to its end just before return config.

    //^^^^^ original webpack content  ^^^^^^

    config.resolve.extensions.push( 'styl', 'coffee' );
    config.module.rules.push(
        {
            test: /\.coffee$/, use: [ 'babel-loader', 'coffee-loader', ],
        },
        {
            test: /\.styl(us)?$/,
            use: [
                'nativescript-dev-webpack/style-hot-loader',
                'nativescript-dev-webpack/apply-css-loader.js',
                { loader: "css-loader", options: { url: false } },
                "stylus-loader",
            ],
        },
        {
            test: /\.pug$/, loader: 'pug-plain-loader'
        },
    );

    // \/\/\/\/ original content \/\/\/\/

    return config;
};

This changes will not break the original configuration, so the original code will run normally, even it's using XML, JS and SCSS, but you can create new .vue files using following template:

<template lang="pug">
.

</template>


<style lang="stylus">
// .
</style>


<script lang="coffee">
module.exports =
    name: ''
    # props: []
    # data: ->
    # computed:
    # watch:
    #    '$route': (to, from) ->
    # components:
    # beforeRouteEnter: (to, from, next) ->
    # beforeRouteLeave: (to, from, next) ->
    # created: ->
    # mounted: ->
    #     @$nextTick ->
    # destroyed: ->
    # beforeDestroy: ->
    # methods:

</script>

Finally you should be able to preview your new app

tnx preview