A new Vue for NativeScript

Do you ever get a hankering to try software in its early days? There’s a certain charm and level of excitement in forking a newly-built repo and trying it, in all its shiny glory, on your mobile emulator. This is the feeling I got when taking a look at the project built by the amazing Igor Randjelovic, which is an integration of Vue.js for NativeScript. Want to write your NativeScript app using Vue.js instead of Angular or plain vanilla NativeScript? Look no further.

Interested in learning more about NativeScript and Vue? Watch the NativeScript-Vue 2.0 webinar on YouTube

{
  "main": "app-with-list-view.js",
  "name": "nativescript-template-tutorial",
  "version": "1.0.1"
}

Why NativeScript with Vue?

const Vue = require('nativescript-vue/dist/index')
new Vue({
    data: {
        test: 'testing',
        test2: 50,
        test3: 30
    },
    template: `
        
            <stack-layout>
                <button @tap="onTap">whatever
                <text-field v-model="test"></text-field>
                <slider v-model.number="test2">
                <slider v-model.number="test3" minvalue="-10" maxvalue="50" style="margin-top: 15;">
                
                {{ test }}
                {{ test2 }}
                {{ test3 }}
            </stack-layout>
        
    `,
    methods: {
        onTap() {
            this.test = 'changed'
            this.test2 = 42
        }
    }
}).$start()

data: {
  subreddit: '/r/funny'
},

methods: {
        onTap() {
            this.test = 'changed'
            this.test2 = 42
        }
    }

const Vue = require('nativescript-vue/dist/index')
const VueRouter = require('vue-router')
Vue.use(VueRouter)
global.process = {env: {}} // hack! a build process should replace process.env's with static strings.
const http = require("http")
const SegmentedBarItem = require('tns-core-modules/ui/segmented-bar').SegmentedBarItem
Vue.prototype.$http = http
const Recipe = {
    data: function(){
        return {
            recipe: []
        }
    },
    created() {
        var id = this.$route.params.id
        this.fetchOneRecipe(id)
        var firstItem = new SegmentedBarItem();
        var secondItem = new SegmentedBarItem();
        var thirdItem = new SegmentedBarItem();
        firstItem.title = "Ingredients";
        secondItem.title = "Tools";
        thirdItem.title = "Procedure";
        this.recipeSteps = [ firstItem, secondItem, thirdItem ];    
    },
    template: `
    <stack-layout>
    <img :src="recipe.image" height="25%" stretch="aspectFill">            
        <stack-layout class="innerCard">
               
            <segmented-bar class="bar" bordercolor="#8AC215" :items="recipeSteps" selectedbackgroundcolor="#8AC215" #sb="" selectedindex="0" @selectedindexchange="changeTab(sb)"></segmented-bar>
            <stack-layout verticalalignment="top">
                <scroll-view height="75%" verticalalignment="top">
                    
                </scroll-view>
                <stack-layout height="25%" verticalalignment="center">
                </stack-layout>
            </stack-layout>
        </stack-layout>
    </stack-layout>
    `,
    methods: {
        fetchOneRecipe(id){
            this.$http.getJSON(`https://quicknoms-91e39.firebaseio.com/Recipes.json?orderBy="$key"&equalTo="${id}"`).then((res) => {
                this.recipe = res;
                for( var key in res) {
                    this.recipe.name = res[key].Name
                    this.recipe.image = res[key].Image
                    this.recipe.notes = res[key].Notes
                    this.recipe.procedure = res[key].Method
                }
                console.log(JSON.stringify(this.recipe))                
            }).catch((err) => {
                console.log('err..' + err)
            })
        },
        changeTab(id){
         switch (id) {
            case 0:
                this.procedure = this.ingredients; 
                break;
            case 1:
                this.procedure = this.tools; 
                break;
            case 2:
                this.procedure = this.method; 
                break;            
         }
    }
    }
}
const Recipes = {
    data: function(){
        return {
            recipes: []
        }
    },
    created() {
        this.fetchRecipes()
    },
    template: `
            <scroll-view class="green">
                <wrap-layout horizontalalignment="center">      
                    <stack-layout style="margin-left: 10" class="card" width="45%" v-for="(recipe, i) in recipes" key="i">
                        <stack-layout horizontalalignment="center" @tap="$router.push({ name:'recipe',params: {id: recipe.id} })">
                            <img :src="recipe.image">          
                            {{ recipe.name }}
                        </stack-layout>
                    </stack-layout>           
                </wrap-layout>
            </scroll-view>
    `
    ,
    methods: {
        
        fetchRecipes() {
            this.$http.getJSON(`https://quicknoms-91e39.firebaseio.com/Recipes.json`).then((res) => {
                for( var key in res) {
                    this.recipes.unshift({id : key, name: res[key].Name, image: res[key].Image})                    
                } 
            }).catch((err) => {
                console.log('err..' + err)
            })
        }
    }
}
const router = new VueRouter({
    routes: [
        {path: '/recipes', component: Recipes},
        {path: '/recipe/:id', name: 'recipe', component: Recipe},
        {path: '*', redirect: '/recipes'}
    ]
})
router.replace('/recipes')
new Vue({
    router,
    template: `
        
            <stack-layout>
                <router-view></router-view>
            </stack-layout>
        
    `   
}).$start()