Vue Counter Example - Nativescript Typing CST Test

Loading…

Vue Counter Example — Nativescript Code

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

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

Nativescript Language Guide

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.

Primary Use Cases

▸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

Notable Features

▸Direct access to native UI components
▸Cross-platform with single codebase
▸Supports Angular, Vue, and plain TypeScript/JavaScript
▸Large ecosystem of plugins for device APIs
▸Open-source and actively maintained

Origin & Creator

Developed by Progress in 2015, NativeScript was created to bridge the gap between web development skills and native mobile development, providing a cross-platform solution without relying on WebViews.

Industrial Note

Perfect for enterprises and startups seeking cross-platform apps with fully native performance while leveraging existing JavaScript/TypeScript skills.

Quick 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

Learning Path

▸Learn NativeScript CLI commands
▸Understand project structure and app folder
▸Explore plugins and native APIs
▸Integrate Angular or Vue with NativeScript
▸Build, test, and deploy native mobile apps

Practical Examples

▸Enterprise apps with native dashboards
▸Cross-platform mobile productivity apps
▸Apps requiring access to camera, GPS, or sensors
▸Consumer apps with high-performance UI
▸Rapid prototypes for mobile startups

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

Strengths

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

Limitations

▸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

When NOT to Use

▸Projects requiring pure web technologies
▸Teams with no TypeScript or Angular/Vue experience
▸Apps needing extremely lightweight bundle sizes
▸Web-first applications with minimal native features
▸Developers preferring full native platform SDKs for UI

Cheat Sheet

▸`ns create MyApp` - create project
▸`ns platform add android ios` - add platform
▸`ns plugin add <plugin-name>` - add plugin
▸`ns run android` - run on device/emulator
▸`ns build ios` - build for iOS

FAQ

▸Is NativeScript maintained?
▸Yes, actively maintained by Progress and community.
▸Can I use Angular or Vue?
▸Yes, NativeScript supports Angular, Vue, and plain TypeScript/JS.
▸Does it support native APIs?
▸Yes, directly without WebView.
▸Is it suitable for high-performance apps?
▸Yes, NativeScript renders real native UI components.
▸Can I deploy to both iOS and Android?
▸Yes, cross-platform deployment is supported.

30-Day Skill Plan

▸Week 1: Create projects and add platforms
▸Week 2: Learn core UI components and layout system
▸Week 3: Use plugins for camera, GPS, notifications
▸Week 4: Optimize performance and debug native code
▸Week 5: Deploy apps to stores and maintain plugins

Final Summary

▸NativeScript allows building truly native iOS and Android apps with one codebase.
▸Direct access to native APIs ensures real native performance.
▸Supports Angular, Vue, TypeScript, and JavaScript.
▸Ideal for enterprise apps, high-performance consumer apps, and rapid prototyping.
▸Offers a rich plugin ecosystem and CLI tools for building, testing, and deploying.

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

Monetization

▸Enterprise internal apps
▸Consumer apps with cross-platform reach
▸Consulting for NativeScript projects
▸Plugin development for device features
▸Rapid deployment solutions

Productivity Tips

▸Leverage CLI commands for efficiency
▸Use plugins for native functionality
▸Test frequently on devices
▸Use Angular/Vue integration for consistent UI
▸Document code and project structure

Basic Concepts

▸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

Official Docs

More Nativescript Typing Exercises

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

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Vue Counter Example — Nativescript Code

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

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

Nativescript Language Guide

Primary Use Cases

▸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

Notable Features

▸Direct access to native UI components
▸Cross-platform with single codebase
▸Supports Angular, Vue, and plain TypeScript/JavaScript
▸Large ecosystem of plugins for device APIs
▸Open-source and actively maintained

Origin & Creator

Industrial Note

Perfect for enterprises and startups seeking cross-platform apps with fully native performance while leveraging existing JavaScript/TypeScript skills.