Lessons Learned on Writing Apps with NativeScript VueJS

#11β€” An overview on How to Build Native Apps with NativeScript VueJS

Learning preparation

What is NativeScript VueJS

NativeScript

Source: https://docs.nativescript.org/core-concepts/technical-overview

VueJS & documentation

Utilities & Components

NativeScript Command Line Interface

NativeScript CLI and VueJS CLI are as easy as pressing β€œany” key

Let’s build the app

Goal

Plugins and APIs

Architecture & file structure

.
β”œβ”€β”€ App_Resources
β”‚ β”œβ”€β”€ Android
β”‚ β”‚ β”œβ”€β”€ app.gradle
β”‚ β”‚ β”œβ”€β”€ google-services.json
β”‚ β”‚ └── src
β”‚ β”‚ └── main
β”‚ β”‚ β”œβ”€β”€ AndroidManifest.xml
β”‚ β”‚ └── res
β”‚ β”‚ └── ...
β”‚ └── iOS
β”‚ β”œβ”€β”€ Assets.xcassets
β”‚ β”‚ └── ...
β”‚ β”œβ”€β”€ GoogleService-Info.plist
β”‚ β”œβ”€β”€ Info.plist
β”‚ β”œβ”€β”€ LaunchScreen.storyboard
β”‚ └── build.xcconfig
β”œβ”€β”€ app.scss
β”œβ”€β”€ assets
β”‚ └── ...
β”œβ”€β”€ components
β”‚ β”œβ”€β”€ NewsItem.vue
β”‚ └── NewsLoading.vue
β”œβ”€β”€ fonts
β”œβ”€β”€ main.js
β”œβ”€β”€ package.json
β”œβ”€β”€ services
β”‚ β”œβ”€β”€ fetchGitnews.js
β”‚ β”œβ”€β”€ getColor.js
β”‚ └── getReadme.js
β”œβ”€β”€ store
β”‚ β”œβ”€β”€ index.js
β”‚ β”œβ”€β”€ modules
β”‚ β”‚ β”œβ”€β”€ news.js
β”‚ β”‚ └── readme.js
β”‚ └── mutation-types.js
└── views
β”œβ”€β”€ About.vue
β”œβ”€β”€ News.vue
β”œβ”€β”€ NoNetwork.vue
└── Preview.vue

Components

The power of Vuex

Source: https://github.com/connor11528/vuex-shopping-cart

Platform-specific code

Styling

As easy as CSS right?

Deployment

The final result πŸš€

iOS (on the left) and Android (on the right)

Pros and cons of NativeScript VueJS

Pros πŸ™‚

Cons πŸ™

If you liked this post, please click the clap πŸ‘button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!

Hello, I’m Sandoche Adittane. I learn about one topic every month and write a post about it!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store