nativescript-vue-lifecycle-hooks

    1.0.0 • Public • Published

    NPM

    npm version

    NativeScript-Vue Lifecycle Hooks

    Install

    npm install nativescript-vue-lifecycle-hooks --save
    

    main.js

    import Vue from 'nativescript-vue'
    import NSVueLifecycleHooks from 'nativescript-vue-lifecycle-hooks'
    
    Vue.use(NSVueLifecycleHooks)
    

    Usage

    In any component that has Page element as child, you can use NativeScript page events with Vue lifecycle hooks style.

    So instead of this:

    <template>
        <Page @loaded="onLoaded" @navigatingTo="onNavigatingTo">
            <Label>Hello world</Label>
        </Page>
    </template>
    
    <script>
        export default {
            methods: {
                onLoaded(args){
                    console.log('page is loaded.')
                },
                onNavigatingTo(args){
                    console.log('page is navigating to.')
                }
            }
        }
    </script>
    

    Use this:

    <template>
        <Page>
            <Label>Hello world</Label>
        </Page>
    </template>
    
    <script>
        export default {
            methods: {
    
            },
            loaded(args){
                console.log('page is loaded.')
            },
            navigatingTo(args){
                console.log('page is navigating to.')
            }
        }
    </script>
    

    Available Lifecycle Hooks.

    <template>
        <Page>
            <Label>Hello world</Label>
        </Page>
    </template>
    
    <script>
        export default {
            // page is loaded.
            loaded(args) {
                console.log('loaded from page 2')
            },
            
            // page is unloaded.
            unloaded(args) {
                console.log('unloaded from page 2')
            },
            
            // when leaving a page (the navigation has ended).
            navigatedFrom(args) {
                console.log('navigatedFrom from page 2')
            },
            
            // when entering a page (the navigation has ended).
            navigatedTo(args) {
                console.log('navigatedTo from page 2')
            },
            
            // when leaving a page (the navigation has started).
            navigatingFrom(args) {
                console.log('navigatingFrom from page 2')
            },
            
            // when entering a page (the navigation has started)
            navigatingTo(args) {
                console.log('navigatingTo from page 2')
            }
        }
    </script>
    

    Contributing

    Thanks for considering contributing.

    License

    MIT

    Install

    npm i nativescript-vue-lifecycle-hooks

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • moeddami