Category: NativeScript Vue

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Full Screen Modal

We can show a full-screen modal by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label :text="id" />
        <Button @tap="$modal.close" text="Close" />
      </StackLayout>
    </Page>
  `,
};
export default {
  methods: {
    openModal() {
      this.$showModal(Detail, { fullscreen: true, props: { id: 1 } });
    },
  },
};
</script>

We call the $showModal method with the Detail component.

And we set the fullscreen property to true to make the modal full screen.

Return Data from the Modal

We can return data from the modal.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label text="Detail" />
        <Button @tap="$modal.close('foo')" text="Close" />
      </StackLayout>
    </Page>
  `,
};
export default {
  methods: {
    async openModal() {
      const data = await this.$showModal(Detail);
      console.log(data);
    },
  },
};
</script>

In the Detail component, we pass in the 'foo' argument in the $modal.close method.

Then we can get that value as the resolved value of the promise returned by $showModal .

BottomNavigation

We can add a navigation bar to the bottom of our screen by writing:

src/mainl.js

import Vue from 'nativescript-vue'
import App from './components/App'
import VueDevtools from 'nativescript-vue-devtools'

if (TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}

// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

new Vue({
  render: h => h(App)
}).$start()

src/components/App.vue

<template>
  <Page>
    <FlexboxLayout flexDirection="column">
      <BottomNavigation>
        <TabStrip>
          <TabStripItem>
            <Label text="Home"></Label>
          </TabStripItem>
          <TabStripItem>
            <Label text="Browse"></Label>
          </TabStripItem>
          <TabStripItem>
            <Label text="Search"></Label>
          </TabStripItem>
        </TabStrip>
        <TabContentItem>
          <Frame id="homeTabFrame">
            <Page>
              <Label text="home" />
            </Page>
          </Frame>
        </TabContentItem>
        <TabContentItem>
          <Frame id="browseTabFrame">
            <Page>
              <Label text="browse" />
            </Page>
          </Frame>
        </TabContentItem>
        <TabContentItem>
          <Frame id="searchTabFrame">
            <Page>
              <Label text="search" />
            </Page>
          </Frame>
        </TabContentItem>
      </BottomNavigation>
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {};
</script>

We render the App component in main.js .

Then in the App component, we add the BottomNavigation component to add the bottom navigation bar.

The TabStrip has the navigation links.

TabStripItem has the content for the tabs.

TabContentItem has the content for the tabs.

The TabContentItem s have the Frame s to show in the tab.

Conclusion

We can add full-screen modals and tabs into our mobile app with NativeScript Vue.

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Navigation

We can use the $navigateTo method lets us show different components in our app.

For example, we can write:

components/App.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to Detail" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import Detail from "@/components/Detail";

export default {
  methods: {
    goTo() {
      this.$navigateTo(Detail);
    },
  },
};
</script>

components/Detail.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to App" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import App from "@/components/App";

export default {
  methods: {
    goTo() {
      this.$navigateTo(App);
    },
  },
};
</script>

In the App component, we call this.$navigateTo with the Detail component to remove App from the screen show the Detail component.

Likewise, in the Detail component, we call the same method with the App component to replace the Detail component with the App component.

We can pass props to the component.

For instance, we can write:

components/App.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to Detail" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import Detail from "@/components/Detail";

export default {
  methods: {
    goTo() {
      this.$navigateTo(Detail, {
        props: {
          foo: "bar",
        },
      });
    },
  },
};
</script>

components/Detail.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to App" @tap="goTo" />
      <Label :text="foo" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import App from "@/components/App";

export default {
  props: ["foo"],
  methods: {
    goTo() {
      this.$navigateTo(App);
    },
  },
};
</script>

In the App component, we pass in an object into the 2nd argument with the props property to pass in props.

Then in the Detail component, we accept the prop as the props property.

And then we get its value and display it in the Label .

We can go back to the previous page with the $navigateBack method.

To use it, we can write:

components/App.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go to Detail" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
import Detail from "@/components/Detail";

export default {
  methods: {
    goTo() {
      this.$navigateTo(Detail);
    },
  },
};
</script>

components/Detail.vue

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Go Back" @tap="goTo" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    goTo() {
      this.$navigateBack();
    },
  },
};
</script>

We have the Detail component that calls the this.$navigateBack method when we tap on the button.

Modals

We can use the this.$showModal method to show a modal.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Modal" @tap="openModal" />
    </FlexboxLayout>
  </Page>
</template>

<script>
const Detail = {
  props: ["id"],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label :text="id" />
        <Button @tap="$modal.close" text="Close" />
      </StackLayout>
    </Page>
  `,
};

export default {
  methods: {
    openModal() {
      this.$showModal(Detail, { props: { id: 1 } });
    },
  },
};
</script>

We call the $showModal method with the Detail component.

And we can pass in props by setting the props property.

Conclusion

We can add navigation and show modals into our mobile app with NativeScript Vue.

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

LoginDialog

NativeScript Vue comes with a login dialog.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await login("Login", "Username field", "Password field");
      const { result: res, userName, password } = result;
      console.log(res, userName, password);
    },
  },
};
</script>

We have a button to open the login dialog.

The login function opens the login dialog.

The first argument is the message content.

The 2nd and 3rd arguments are the placeholders for the username and password inputs respectively.

Then we can get the values of the username and password from the resolved value.

res has the form validation result.

We can set more options by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await login({
        title: "Login Title",
        message: "Login message",
        okButtonText: "OK",
        cancelButtonText: "Cancel",
        userName: "user",
        password: "password",
      });
      const { result: res, userName, password } = result;
      console.log(res, userName, password);
    },
  },
};
</script>

title has the login dialog title.

message has the message for the login dialog.

okButtonText sets the OK button’s text.

cancelButtonText sets the cancel button’s text.

userName sets the default value of the username field.

And password sets the default value of the password field.

PromptDialog

The prompt global function lets us open a dialog with a single-line text input.

To use it, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await prompt(
        "Enter something",
        "Suggested user input"
      );
      console.log(result);
    },
  },
};
</script>

We have a button to open the prompt dialog.

The prompt method takes the dialog text as the first argument and the default value for the input as the 2nd argument.

We can also add more options. For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await prompt({
        title: "Title",
        message: "Enter something",
        okButtonText: "OK",
        cancelButtonText: "Cancel",
        defaultText: "Suggested value",
      });
      console.log(result);
    },
  },
};
</script>

We set the title value to show the dialog title.

message has the dialog message.

okButtonText has the OK button text.

cancelButtonText has the cancel button text.

defaultText has the default value for the input.

Conclusion

We can add a login and prompt dialog into our mobile app with NativeScript Vue.

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

WebView

We can add a WebView component to display web content in our app.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <WebView src="https://www.yahoo.com/" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {};
</script>

We set the URL of the web page to show as the value of the src prop.

Also, we can show a local HTML page by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <WebView src="~/assets/hello.html" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {};
</script>

And we also can show a rendered HTML string with it:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <WebView src="<div><h1>hello world</h1></div>" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {};
</script>

We set the src prop to an HTML string and it’ll be displayed.

ActionDialog

We can show an action dialog with the action method.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await action("Your message", "Cancel", [
        "Option1",
        "Option2",
      ]);
      console.log(result);
    },
  },
};
</script>

We add a button to call the openAlert method to open the action dialog when we tap it.

The action function is a global function that’s called to open the action dialog.

The first argument is the message, which is displayed as the title.

The 2nd argument is the cancel button text.

And the 3rd argument is an array of option texts that we can tap on.

AlertDialog

We can show an alert dialog with the alert global function.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      await alert({
        title: "Your title",
        message: "Your message",
        okButtonText: "OK",
      });
      console.log("Alert dialog closed");
    },
  },
};
</script>

We add the button to show the alert when we tap on the button.

The alert function takes an object that lets us set the title of the dialog.

message is the content text of the dialog.

okButtonText is the OK button’s text.

Also, we can just pass in a string to display:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      await alert("hello world");
      console.log("Alert dialog closed");
    },
  },
};
</script>

ConfirmDialog

The confirm global function lets us open a confirm dialog.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await confirm({
        title: "Your title",
        message: "Your message",
        okButtonText: "OK",
        cancelButtonText: "Cancel",
      });
      console.log(result);
    },
  },
};
</script>

We add the button to open the confirm dialog by calling the confirm function.

The title property has the title text.

message has the dialog message.

okButtonText has the OK button’s text.

And the cancelButtonText has the cancel button text.

We can also add a simple dialog by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <Button text="Open Dialog" @tap="openDialog" />
    </FlexboxLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    async openDialog() {
      const result = await confirm("Your message");
      console.log(result);
    },
  },
};
</script>

The string is the message text for the confirm dialog.

Conclusion

We can add web views and various dialogs with NativeScript Vue.

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

TextField

The TextField component lets us add a text input into our app.

For example, we can use it by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextField v-model="textFieldValue" />
      <Label :text="textFieldValue" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textFieldValue: "",
    };
  },
};
</script>

We add the TextField component and add the v-model directive to bind the input value to the textFieldValue reactive property.

Then we display that value in the Label .

So when we type in something, the inputted value is shown.

We can also add the hint prop to add an input placeholder.

And the secure prop hides the entered text when it’s true .

It also takes the autocorrect prop to enable or disable autocorrect.

TextView

We can add a TextView to our NativeScript Vue app to show an editable or read-only multiline text container.

To add an editable TextView , we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextView v-model="textViewValue" />
      <Label :text="textViewValue" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textViewValue: "",
    };
  },
};
</script>

We bind the inputted value to the textViewValue with the v-model directive.

Also, we can use it to display multi-style text by writing:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TextView :editable="false">
        <FormattedString>
          <Span text="You can use text attributes such as " />
          <Span text="bold, " fontWeight="Bold" />
          <Span text="italic " fontStyle="Italic" />
          <Span text="and " />
          <Span text="underline." textDecoration="Underline" />
        </FormattedString>
      </TextView>
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      textViewValue: "",
    };
  },
};
</script>

We set the editable prop to false to disable editing.

And then we add the FormattedString and Span components to add the styled text.

TimePicker

We can use the TimePicker component to add a time picker into our NativeScript Vue app.

For example, we can write:

<template>
  <Page>
    <ActionBar title="NativeScript App"></ActionBar>
    <FlexboxLayout flexDirection="column">
      <TimePicker v-model="selectedTime" />
      <Label :text="selectedTime" style="text-align: center" />
    </FlexboxLayout>
  </Page>
</template>

<script >
export default {
  data() {
    return {
      selectedTime: undefined,
    };
  },
};
</script>

We bind the selected time value to the selectedTime reactive property with v-model .

And we display the selected item with the Label .

We can set the following props to configure the TimePicker :

• hourNumber — gets or sets the selected hour.
• minuteNumber — gets or sets the selected minute.
• timeDate — gets or sets the selected time.
• minHourNumber — gets or sets the minimum selectable hour.
• maxHourNumber — gets or sets the maximum selectable hour.
• minMinuteNumber — gets or sets the minimum selectable minute.
• maxMinuteNumber — gets or sets the maximum selectable minute.
• minuteIntervalNumber — gets or sets the selectable minute interval.

Conclusion

We can add various kinds of input controls into our NativeScript Vue mobile app.