Learn Nativescript - 8 Code Examples & CST Typing Practice Test

NativeScript is an open-source framework for building truly native mobile applications using JavaScript, TypeScript, Angular, or Vue. It allows developers to write cross-platform apps that access native APIs directly without using WebViews.

View all 8 Nativescript code examples →

NativeScript Vue Counter Example NativeScript Vue Step Counter NativeScript Vue Auto Increment Counter NativeScript Vue Dark Mode Counter NativeScript Vue Multi Counter NativeScript Vue Toggle Counter NativeScript Vue Countdown Timer NativeScript Vue Counter With Alert

Learn NATIVESCRIPT with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

NativeScript Vue Counter Example

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="NativeScript Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .btn-warning { margin: 10px 0; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Demonstrates a simple counter layout using NativeScript Vue components and Vue.js for interactivity.

Let’s Try →

NativeScript Vue Step Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Step Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <TextField v-model.number="step" keyboardType="number" hint="Step" class="step-input" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const step = ref(1);
        const isDark = ref(false);

        const increment = () => count.value += step.value;
        const decrement = () => count.value -= step.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, step, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .step-input { margin: 5px; width: 100px; text-align: center; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter example with customizable step increment.

Let’s Try →

NativeScript Vue Auto Increment Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Auto Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="Pause/Resume" @tap="toggleRunning" class="btn-warning" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isRunning = ref(true);
        const isDark = ref(false);

        let interval;
        onMounted(() => {
        interval = setInterval(() => { if(isRunning.value) count.value++; }, 1000);
        });
        onUnmounted(() => clearInterval(interval));

        const toggleRunning = () => isRunning.value = !isRunning.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => isDark.value = !isDark.value;

        return { count, isRunning, toggleRunning, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-warning, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter automatically increments every second with pause/resume control.

Let’s Try →

NativeScript Vue Dark Mode Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Dark Mode Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #222; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Simple counter with dark/light theme toggle.

Let’s Try →

NativeScript Vue Multi Counter

<template>
    <Page class="page">
        <ActionBar title="Multi Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <StackLayout v-for="(c, index) in counters" :key="index" class="counter-block">
        <Label :text="`Counter ${index+1}: ${c}`" class="counter-text" />
        <Button text="+" @tap="() => increment(index)" class="btn-primary" />
        </StackLayout>
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const counters = ref([0,0,0]);
        const increment = (i) => counters.value[i]++;
        return { counters, increment };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary { margin: 5px; }
    .counter-text { font-size: 20px; margin-bottom: 10px; }
</style>

Multiple independent counters in a single page.

Let’s Try →

NativeScript Vue Toggle Counter

<template>
    <Page class="page">
        <ActionBar title="Toggle Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Toggle Double: {{ double ? 'ON' : 'OFF' }}" @tap="toggleDouble" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const double = ref(false);
        const increment = () => count.value += double.value ? 2 : 1;
        const decrement = () => count.value -= double.value ? 2 : 1;
        const reset = () => count.value = 0;
        const toggleDouble = () => double.value = !double.value;
        return { count, double, increment, decrement, reset, toggleDouble };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter with toggle for double increment mode.

Let’s Try →

NativeScript Vue Countdown Timer

<template>
    <Page class="page">
        <ActionBar title="Countdown Timer" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Time: ${count}`" class="counter-text" />
        <Button text="Start" @tap="startCountdown" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(10);
        let timer;
        const startCountdown = () => {
        clearInterval(timer);
        timer = setInterval(() => { if(count.value > 0) count.value--; }, 1000);
        };
        const reset = () => { clearInterval(timer); count.value = 10; };
        return { count, startCountdown, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Countdown counter starting from 10 to 0.

Let’s Try →

NativeScript Vue Counter With Alert

<template>
    <Page class="page">
        <ActionBar title="Counter Alert" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
import { alert } from '@nativescript/core/ui/dialogs';
export default {
    setup() {
        const count = ref(0);
        const increment = () => {
        count.value++;
        if(count.value === 10) alert('Count reached 10!');
        };
        const reset = () => count.value = 0;
        return { count, increment, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Nativescript

What is Nativescript?

What are the primary use cases for Nativescript?

Cross-platform native apps for iOS and Android. Enterprise apps requiring native performance. Apps needing access to full device APIs and native UI. Rapid prototyping of native mobile apps. Integration with Angular, Vue, or plain TypeScript/JavaScript front-end

What are the strengths of Nativescript?

True native performance without WebView. Single codebase for multiple platforms. Rich plugin ecosystem. Seamless integration with popular frameworks. Active open-source community

What are the limitations of Nativescript?

Smaller community than Cordova or React Native. Some plugins may require native code tweaks. Steeper learning curve for web-only developers. Larger app size than minimal native apps. Debugging native issues may require platform knowledge

How can I practice Nativescript typing speed?

CodeSpeedTest offers 8+ real Nativescript code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

NativeScript Vue Counter Example

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="NativeScript Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .btn-warning { margin: 10px 0; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Demonstrates a simple counter layout using NativeScript Vue components and Vue.js for interactivity.

Let’s Try →

NativeScript Vue Step Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Step Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <TextField v-model.number="step" keyboardType="number" hint="Step" class="step-input" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const step = ref(1);
        const isDark = ref(false);

        const increment = () => count.value += step.value;
        const decrement = () => count.value -= step.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, step, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary { margin: 5px; }
    .step-input { margin: 5px; width: 100px; text-align: center; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter example with customizable step increment.

Let’s Try →

NativeScript Vue Auto Increment Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Auto Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="Pause/Resume" @tap="toggleRunning" class="btn-warning" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isRunning = ref(true);
        const isDark = ref(false);

        let interval;
        onMounted(() => {
        interval = setInterval(() => { if(isRunning.value) count.value++; }, 1000);
        });
        onUnmounted(() => clearInterval(interval));

        const toggleRunning = () => isRunning.value = !isRunning.value;
        const reset = () => count.value = 0;
        const toggleTheme = () => isDark.value = !isDark.value;

        return { count, isRunning, toggleRunning, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #333; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-warning, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter automatically increments every second with pause/resume control.

Let’s Try →

NativeScript Vue Dark Mode Counter

<template>
    <Page class="page" :class="{ 'dark-theme': isDark }">
        <ActionBar title="Dark Mode Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Switch Theme" @tap="toggleTheme" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => { isDark.value = !isDark.value; };

        return { count, increment, decrement, reset, toggleTheme, isDark };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .dark-theme { background-color: #222; color: #fff; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Simple counter with dark/light theme toggle.

Let’s Try →

NativeScript Vue Multi Counter

<template>
    <Page class="page">
        <ActionBar title="Multi Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <StackLayout v-for="(c, index) in counters" :key="index" class="counter-block">
        <Label :text="`Counter ${index+1}: ${c}`" class="counter-text" />
        <Button text="+" @tap="() => increment(index)" class="btn-primary" />
        </StackLayout>
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const counters = ref([0,0,0]);
        const increment = (i) => counters.value[i]++;
        return { counters, increment };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary { margin: 5px; }
    .counter-text { font-size: 20px; margin-bottom: 10px; }
</style>

Multiple independent counters in a single page.

Let’s Try →

NativeScript Vue Toggle Counter

<template>
    <Page class="page">
        <ActionBar title="Toggle Counter" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="-" @tap="decrement" class="btn-danger" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        <Button text="Toggle Double: {{ double ? 'ON' : 'OFF' }}" @tap="toggleDouble" class="btn-warning" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const double = ref(false);
        const increment = () => count.value += double.value ? 2 : 1;
        const decrement = () => count.value -= double.value ? 2 : 1;
        const reset = () => count.value = 0;
        const toggleDouble = () => double.value = !double.value;
        return { count, double, increment, decrement, reset, toggleDouble };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-danger, .btn-secondary, .btn-warning { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter with toggle for double increment mode.

Let’s Try →

NativeScript Vue Countdown Timer

<template>
    <Page class="page">
        <ActionBar title="Countdown Timer" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Time: ${count}`" class="counter-text" />
        <Button text="Start" @tap="startCountdown" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(10);
        let timer;
        const startCountdown = () => {
        clearInterval(timer);
        timer = setInterval(() => { if(count.value > 0) count.value--; }, 1000);
        };
        const reset = () => { clearInterval(timer); count.value = 10; };
        return { count, startCountdown, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Countdown counter starting from 10 to 0.

Let’s Try →

NativeScript Vue Counter With Alert

<template>
    <Page class="page">
        <ActionBar title="Counter Alert" class="action-bar" />
        <StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
        <Label :text="`Counter: ${count}`" class="counter-text" />
        <Button text="+" @tap="increment" class="btn-primary" />
        <Button text="Reset" @tap="reset" class="btn-secondary" />
        </StackLayout>
    </Page>
</template>

<script>
import { ref } from 'vue';
import { alert } from '@nativescript/core/ui/dialogs';
export default {
    setup() {
        const count = ref(0);
        const increment = () => {
        count.value++;
        if(count.value === 10) alert('Count reached 10!');
        };
        const reset = () => count.value = 0;
        return { count, increment, reset };
    }
};
</script>

<style scoped>
    .page { background-color: #fff; color: #000; }
    .container { margin-top: 50px; text-align: center; }
    .btn-primary, .btn-secondary { margin: 5px; }
    .counter-text { font-size: 24px; margin-bottom: 10px; }
</style>

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Nativescript

What is Nativescript?

What are the primary use cases for Nativescript?

What are the strengths of Nativescript?

True native performance without WebView. Single codebase for multiple platforms. Rich plugin ecosystem. Seamless integration with popular frameworks. Active open-source community

What are the limitations of Nativescript?

How can I practice Nativescript typing speed?

CodeSpeedTest offers 8+ real Nativescript code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.