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

Explain

NativeScript enables building native iOS and Android apps from a single codebase using familiar web technologies or TypeScript.

It provides direct access to native UI components and device APIs, offering true native performance.

Ideal for developers who want cross-platform apps with the look, feel, and performance of fully native applications.

Core Features

Native UI rendering for iOS and Android

CLI for project creation, building, and running apps

Plugin architecture to access native APIs

Support for TypeScript, Angular, Vue

Live sync and hot module replacement during development

Basic Concepts Overview

Projects have `app/` folder for source code

`package.json` and `nsconfig.json` manage dependencies and config

Plugins provide access to native APIs

CLI commands handle builds, platforms, and live sync

Native UI components mapped directly from JavaScript/TypeScript

Project Structure

app/ - source code including components, styles, and logic

package.json - npm dependencies

node_modules/ - installed packages

platforms/ - platform-specific builds

hooks/ - build scripts and automation

Building Workflow

Create project using NativeScript CLI

Add platforms for target devices

Install plugins for device API access

Develop using Angular, Vue, or plain JS/TS

Build, deploy, and test on simulators or real devices

Difficulty Use Cases

Beginner: simple apps using core UI components

Intermediate: adding plugins and handling device APIs

Advanced: optimizing performance and native interactions

Expert: creating custom plugins or deep native integration

Community: contributing to NativeScript plugins or core

Comparisons

NativeScript vs Cordova: NativeScript renders real native UI, Cordova uses WebView

NativeScript vs React Native: Both offer native UI, NativeScript supports Angular/Vue directly

True native performance vs hybrid approach

Plugin ecosystem differences

Steeper learning curve than Cordova, easier native integration than Flutter in JS/TS

Versioning Timeline

2015 - NativeScript initial release by Progress

2016-2018 - Angular and Vue integrations added

2019-2020 - Performance and plugin ecosystem improvements

2021-2023 - CLI enhancements and platform updates

2024-2025 - Ongoing community contributions and maintenance

Glossary

Native app: app using platform-native UI components

Plugin: module providing access to device API

CLI: command-line interface for project management

app/ folder: source code and UI for NativeScript apps

LiveSync: live update of app during development

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 →

Explain

NativeScript enables building native iOS and Android apps from a single codebase using familiar web technologies or TypeScript.

It provides direct access to native UI components and device APIs, offering true native performance.

Ideal for developers who want cross-platform apps with the look, feel, and performance of fully native applications.

Comparisons

NativeScript vs Cordova: NativeScript renders real native UI, Cordova uses WebView

NativeScript vs React Native: Both offer native UI, NativeScript supports Angular/Vue directly

True native performance vs hybrid approach

Plugin ecosystem differences

Steeper learning curve than Cordova, easier native integration than Flutter in JS/TS

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.

Learn Nativescript - 8 Code Examples & CST Typing Practice Test

Learn NATIVESCRIPT with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

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

Frequently Asked Questions about Nativescript

What is Nativescript?

What are the primary use cases for Nativescript?

What are the strengths of Nativescript?

What are the limitations of Nativescript?

How can I practice Nativescript typing speed?

Learn Other Programming Languages

Learn Nativescript - 8 Code Examples & CST Typing Practice Test

Learn NATIVESCRIPT with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary