NativeScript Vue Manual Routing Function Typings

NativeScript Vue Manual Routing Function Typing This tutorial will show you how to avoid TypeScript compilation errors when using…

NativeScript Vue Manual Routing Function Typings poster

Take control of your career. Build JavaScript mobile apps.

ng atlanta

Catch Dave Coffin, Nathan Walker, and Alex Ziskind at ngAtlanta in February 2020 for an advanced NativeScript with Angular workshop called  Breathe life into mobile UX with solid architecture lessons. You can register now and take your NativeScript skills up a notch.  Register here.

NativeScript Vue Manual Routing Function Typing

This tutorial will show you how to avoid TypeScript compilation errors when using NativeScript-Vue routing functions along with your TypeScript class-based components.

TL;DR

If you prefer a video tutorial, here you go:


Intro

When using class components with your NativeScript Vue single file components written in TypeScript, you'll need to navigate from component to component using the $navigateTo function. This function, and other NativeScript-Vue specific functions aren't part of the Vue libraries so they don't have TypeScript typings in NativeScript. When you build the project and run it, everything works, but you get an ugly error on the console during build. In this NativeScript Tutorial, we'll show you how to fix that error for the $navigateTo function. The technique can also be applied to other NativeScript-Vue routing functions.


RELATED POST

In order to get set up with using NativeScript-Vue with TypeScript and class components, read this post where I share the five things you need to know to start using class components with NativeScript-Vue.

👉 NativeScript-Vue Class Components Examined


Let's Jump Into It!

To demonstrate a solution to the problem, we've created a simple NativeScript-Vue application that has two pages (as Vue single file components) that we'll navigate between. Here's the code for both:


App.vue:


<!-- App.vue -->

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
      <GridLayout columns="*" rows="*">
        <Label class="message" :text="msg" col="0" row="0" />
        <Button @tap="goToPage2" text="GO TO PAGE 2" col="0" row="1" />
      </GridLayout>
  </Page>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Page2 from "./Page2.vue";

@Component
export default class App extends Vue {
    private msg: string = "Hello World!";
    
    goToPage2() {
      this.$navigateTo(Page2);
    }
}
</script>

<style scoped>
ActionBar {
    background-color: #53ba82;
    color: #ffffff;
}

.message {
    vertical-align: center;
    text-align: center;
    font-size: 20;
    color: #333333
}
</style>

Page2.vue:


<!-- Page2.vue -->

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
      <GridLayout columns="*" rows="*">
        <Label class="message" :text="msg" col="0" row="0" />
      </GridLayout>
  </Page>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Page2 extends Vue {
    private msg: string = "Page 2";
}
</script>

<style scoped>
ActionBar {
    background-color: #53ba82;
    color: #ffffff;
}

.message {
    vertical-align: center;
    text-align: center;
    font-size: 20;
    color: #333333
}
</style>

Notice that both use class-style Vue components. For that, you need to install the vue-class-component and vue-property-decorator packages. See this post for more info about that.


In App.vue, we use goToPage2() to navigate to the second page by calling $navigateTo() and giving it the component we want to navigate to.


If you try out the running app, you will be able to navigate to Page2 by tapping the button but you will get the following error in your console and your code editor might also indicate that there is an error on the this.$navigateTo(Page2); statement.


Property '$navigateTo' does not exist on type 'App'.`

If you look at the problematic statement this.$navigateTo(Page2);, this is actually an instance of App which extends the Vue class that's coming from vue-property-decorator. So for $navigateTo() to be recognized, we need to extend that vue-property-decorator module and the Vue interface that lives in there.


To do that, we create a new file vue-extend.ts:


// vue-extend.ts

import { Vue } from "vue-property-decorator";

declare module "vue-property-decorator" {
  interface Vue {
    $navigateTo(args);
  }
}

In the Vue interface, we add a $navigateTo() method.


Now if you restart the build and run the app, you should be able to navigate to Page2 without errors and your editor will also have stopped complaining.


This technique can also be used to append other functions that you might not have that are related to the Vue instance.


Well, we hope that was helpful. For more video tutorials on NativeScript, check out our courses on NativeScripting.com. We have courses that cover all flavors of NativeScript (Core, Angular and Vue) and that cater to different levels of experience, whether you are just beginning your journey in the NativeScript world or you have some experience with NativeScript and are looking to level up.


Let me know what you thought of this tutorial on Twitter: @digitalix or leave a comment down below. You can also send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the #iScriptNative hashtag.


Alex lives in Washington, DC. He's a speaker, trainer, and a Telerik Developer Expert. He's been invloved in NativeScript projects since 2015 and has created courses for Pluralsight and LinkedIn.

Did you enjoy this? Share it!

Take control of your career. Build JavaScript mobile apps.