How to Install Vue Native?

Vue Native is a mobile framework to build a truly native mobile app using Vue.js. It is designed to connect React Native and Vue.js. Vue Native is just a wrapper around React Native APIs, which allows us to use Vue.js and compose impressive and creative mobile User Interfaces.

Vue.js

Vue (pronounced like view) is a progressive framework for building user interfaces. Vue is designed from the ground up to be incrementally adoptable. The core library focused is on the view layer only and it is easy to integrate with your existing projects. Quick check hope you have these things already installed with the given version or above

• Globally installed node ≥ 6.0
• Globally installed npm ≥ 4.0
• Globally installed Expo CLI OR React Native CLI

Step by Step Implementation

Open CMD

Step 1: Install Vue Native CLI

Install Vue Native CLI globally with the following command:

 npm install –global vue-native-cli

For Expo users

Expo was designed to allow developers to quickly set up and develop React Native apps without having to configure Xcode or Android Studio.

Step 1: Install Expo CLI globally

 npm install –global expo-cli

That’s it my friends!! It will take time to create and check if it is working. Create a new project using the CLI’s init command

 vue-native init <projectName>

vue-native init todoapp

Now you are all set to Run the app

Now cd into the newly created folder with the name of your project name and start the development server.

cd <projectName>

npm start

Now you will see this screen asking for iOS or android 

Just press “a” connect your phone with debugging on and you will see your app running

Congratulations you are in the ecosystem of Vue Native

For React Native CLI users

If you use Expo to develop your app, then it comes with the disadvantage that you can’t work with custom native modules beyond React Native’s API, since Expo doesn’t build native code. So if you ever need to work with custom Java or Swift modules, you’ll need to eject the app with expo eject. but if you will set up your project with React Native CLI, which will allow you to work with such modules from the start.

Step 1: First lets Install React Native CLI globally on your computer

 npm install –global react-native-cli

Step 2: Now to test let’s create a new project using the CLI’s init command with the –no-expo option

 vue-native init <projectName> –no-expo

Step 3: Now let’s run the app

Now cd into the newly created directory and start the development server.

 cd <projectName>

 npm start

You can also use react-native-CLI to start the app with platform-specific options. For example, if you would like to start the development server and the app on a running Android emulator, while

 react-native run-android

If you would like to start the development server and the app on an iPhone 8 simulator.

 react-native run-ios –simulator “iPhone 8”