[NativeScript + VueJS] NativeScript VueJS Boilerplate (NetworkService, Vue Module, Custom Logger, Documentation)

Repository

https://github.com/caspernikus/nativescript-vue-boilerplate

About

The idea behind this project is pretty simple. I am currently working with NativeScript-Vue and this boilerplate / template is the basic architecture we (my workplace) are using.
Also it should bring you an easy introduction on how to use NativeScript with VueJS and Vuex Store by using some pretty techniques.

New Features

What feature(s) did you add?

New Features that were added are:

• You can now choose between .less or .scss Stylesheets during package installation
• The App now makes use of Vue Module's:

Vue.prototype.$app = Object.freeze({
    api: new ApiService(network),
});

This way we only need to initialise helper one time and are able to use them in every component with this.$app.api

• A Network Connection Service was added

const network = new NetworkService();
Vue.prototype.$app = Object.freeze({
    network,
    api: new ApiService(network),
});

This NetworkService checks and monitors for changes in the connectivity. If a change occurs the App State will be changed. We can use this in two ways: a) block API calls if there is no connection and b) Change our components accordingly if we lost connection (e.g disable buttons / textfields)

The Vuex Store was extended for this purpose

const store = new Vuex.Store({
    state: {
        isOnline: true
    },
    modules: {
        user: user,
    },
    mutations: {
        updateOnlineStatus(state, isOnline) {
            state.isOnline = isOnline;
        },
    },
    actions: {
        saveOnlineStatus(context, isOnline) {
            context.commit('updateOnlineStatus', isOnline);
        },
    },
    getters: {
        isOnline(state) {
            return state.isOnline;
        }
    },
  strict: debug,
});

• An experimental Logger was added

Vue.prototype.Logger = new LoggerService();

The Logger is currently experimental and appends the current date before an output

• Documentation was added where it makes sense (Vue + Vuex Logic must not be explained)

How did you implement it/them?

A lot of code is already above.

• LoggerService
• NetworkService
• NetworkService detect changes and update state

store.dispatch('saveOnlineStatus', network.isOnline);
network.on('networkStatusChanged', function(event) {
    const isOnline = event.object.isOnline;
    
    store.dispatch('saveOnlineStatus', isOnline);
});

• Example of conditional template creation

// Script determination
{{#if_eq style_lang "less"}}
import './styles.less'
{{/if_eq}}

{{#if_eq style_lang "scss"}}
import './styles.scss'
{{/if_eq}}

Everything else can be found in commits starting with Different style languages + vue app module

Usage

# Scaffold project
npm install -g vue-cli
vue init caspernikus/nativescript-vue-boilerplate <project-name>
cd <project-name>

# Install dependencies
npm install

# For building read Readme in Project Folder

# Clean the NativeScript application instance (i.e. rm -rf dist)
npm run clean

How to contribute?

Create PR (Pull Requests)

GitHub Account

https://github.com/caspernikus/
https://github.com/benediktveith/

Proof For GitHub

benediktveith is also my account