Skip to content

Instantly share code, notes, and snippets.

Last active July 27, 2019 19:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Starting with Nativescript and seting up to use Coffeescript, Pug and Stylus


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' );
            test: /\.coffee$/, use: [ 'babel-loader', 'coffee-loader', ],
            test: /\.styl(us)?$/,
            use: [
                { loader: "css-loader", options: { url: false } },
            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">


<style lang="stylus">
// .

<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:


Finally you should be able to preview your new app

tnx preview
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment