LOADING...

Nativescript – Vue.js tutorial – Web

The following document explains how developers can use Nativescript and Vue to build their own version of the Ezlo mobile app.

Compatible with vue-cli v3

Nativescript is a cross-platform framework which allows developers to write and deploy native mobile apps for iOS and Android from a single codebase.

You can use Angular or Vue to share existing web-based code.

Vue is a progressive framework for building user interfaces. The core library is focused on the view layer. Vue is very easy to pick up and integrate with other libraries or existing projects.

Vue Installation

In order to create a vuejs project you will need to install a couple of packages – VueJs and Vue Cli.

Create a project folder then open your terminal and install VueJs with the following command

NPM

npm install vue

Once installed, next install the second package – Vue Cli

NPM

npm install -g @vue/cli

When both are installed, run the following command:

NPM

vue create name-of-your-application

This will start a wizard which guides you through the configuration of your project.

Choose ‘Manually select features’ to access facilities like Vuex, Router etc.

Select, ‘Babel’ (for poly), ‘Router’, ‘Vuex’, and ‘Linter’.

Select ‘Yes’ for history mode for the router.

History Mode

The default mode for vue-router is hash mode – it uses the URL hash to simulate a full URL so that the page won’t reload when the URL changes.

To get rid of the hash, we use the router’s history mode, which leverages the history.pushStateAPI to achieve URL navigation without a page reload:

Next, choose a linter/ formatter configuration. This is your personal choice, but we recommend Airbnb for most deployments

Next, choose whether you want to place the configuration files (Babel EsLint etc), in dedicated files or all in a single package.json. Again, this is up to you, but we recommend a single .json.

Choose whether you want to save this configuration as a template/preset for future projects. After choosing, the wizard will start to create your project:

After the wizard has installed your project, navigate to it by entering its path in the terminal:

There are two ways to run your Vue project. The first is to run the classic package startup script with the following command:

NPM

npm run serve

Alternatively, you can use the integrated dashboard that comes with Vue. Enter the following command to open the dashboard:

NPM

vue ui

 

The Vue Cli dashboard is a smart and easy way to manage your projects. The ‘vue ui’ command mentioned above will open the dashboard interface in a browser:

 

Open the ‘Import’ tab and enter the path to your new project. Select ‘Import this folder’:

Once imported, you can access all of your plugins in the left-hand menu. You can customize your project by adding/removing features.

Launch your project – Click ‘Tasks’ > ‘Serve’ > Click the ‘Run Task’ button:

Once the circle on the right states 100%, click the ‘Open App’ button just above it.

The dashboard gives you a more visual way to view your projects and the ability to search for plugins without going to NPM or the terminal.

Type the following command in the terminal to see your project using a IDE (in this case, Visual Studio code):

NPM

code .

 

Nativescript-Vue Installation

Documentation: https://nativescript-vue.org/en/docs/getting-started/installation/

There are two ways you can install the nativescript-vue package on your project – via the terminal, or by using the VUE UI dashboard.

In the Vue dashboard, click ‘Plugins’ on the left then click ‘Add Plugin’ at top-right of the page:

Search for nativescript’ in the plugins screen:

…then choose the one with the one with this logo:

Click ‘Install’ at bottom of the page to install the plugin.

After installation, a wizard will start that helps you setup your project for nativescript-vue.

Select ‘History mode’ for routers, and choose ‘Dual Native and Web (Default)’ to make the project cross-platform.

Click ‘Finish Installation’

The scaffolding is now complete, and you can open the code in an editor and start work. Use the npm
run
 scripts provided in the plugin to build, serve, debug, and even preview (using the Playground apps) your new web and mobile apps.

To run your project on mobile or web, go to ‘Project tasks’ then select ‘Preview Android’ and/or ‘Preview IOS’. A QR code is generated for the app.

In order to view your live application, you must install two Nativescript apps on your mobile device.

Nativescript Applications

# Use the NativeScript Playground app and scan the QR code to preview the application on your device.

You can install the Playground app from the following locations:

App Store (iOS): https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1
Google Play (Android): https://play.google.com/store/apps/details?id=org.nativescript.play

Once installed, scan the QR Code with the Playground application. The app will send a real-time preview of the application to the phone:

In the Vue Dashboard where the QR Code was generated you can see the phone connected to your application.

Log Nativescript

Webpack compilation complete. Watching for file changes.Webpack build done!Start sending initial files for platform android.Successfully sent initial files for platform android. LOG from device OnePlus 6T: ‘{NSVue (Vue: 2.5.22 | NSVue: 2.2.2)} -> CreateElement(nativegridlayout)’ LOG from device OnePlus 6T: ‘{NSVue (Vue: 2.5.22 | NSVue: 2.2.2)} -> CreateElement(nativebutton)’LOG from device OnePlus 6T: ‘{NSVue (Vue: 2.5.22 | NSVue: 2.2.2)} -> CreateElement(NativePage)’LOG from device OnePlus 6T: ‘{NSVue (Vue: 2.5.22 | NSVue: 2.2.2)} -> CreateElement(NativeFrame)’

Every modification to the project will automatically update the preview on your phone.

A look under the hood

The code can be run on both web and mobile, and provides examples of various code sharing strategies you might employ.

For example, look at the files main.js and main.native.js. Since they are the entry point for your mobile and web apps, and probably include separate platform plugins, they are differentiated by naming convention. Any file named *.native.* is rendered only for mobile.

Mount a web app:

Start a NativeScript-Vue app:

Now take a look at App.vue, the single point of entry and the first Vue SFC with shared templates:

If you don’t have much markup, you can easily create a completely shared file with the parts designated per platform. Moreover, in this file you can share one script block between platforms. Each platform will deploy only those methods it supports:

This file shows an example of a forked style which imports only the styles relevant to your platform:

Related links:

  1. https://www.nativescript.org/vue
  2. https://nativescript-vue.org/en/docs/getting-started/playground-tutorial/
  3. https://play.nativescript.org/    – online editor for generating apps
  4. https://vuejs.org/v2/guide/
  5. https://cli.vuejs.org/guide/

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *