# Getting Started

# What is it?

Vue Mobile is a template for your future application. You can use it to start developing you hybrid application quickly. 'Hybrid' means that it will work simultaneously on your website as well as in iOS and Android application (wrapped in Cordova).

Vue Mobile has some basic application parts: authentication forms, simple dashboard, app settings in modal window, editable list of items, sortable data table with paging and searching, catalog of items and all required form elements with validation. We also prepared simple TODOs tutorial for you so that you could better learn the idea of application architecture.

The main focus of Vue Mobile project is performance. It uses one of the most lightweight and fastest framework VueJS with Vuex engine for managing application state transparently.

Vue Mobile provides you a codebase to show you how to develop big and scalable application with best practices. Project sources complies with official Vue code conventions, and for css naming BEM method is used.

Vue Mobile UI has responsive layout and is based on Google Material Design ideas.
We do not use any large frameworks of components that will slowdown performance. We designed all components with minimal code and plain css. They are easy to customize.

Vue mobile do not have any external 3rd party dependencies except Vue libs and momentjs. Last one is used for date time picker and for timezone support.

Vue mobile also has multi-language support out of the box. All UI is translated in 3 languages.

# What's in the project archive

After extracting it, the downloaded .zip file looks like this:

It contains:

• Application. Contains template code of your future project. You will use this folder for all later instructions.
• Documentation. Contains offline version of these docs.

# Preparing local environment

Before you will run application you will need to do first time preparations:

• NodeJS. Make sure that NodeJS is installed on your computer. If it is not installed, please install latest version by the link.
• Cordova. If your future app targets iOS or Android mobile devices, your environment should be properly configured and the corresponding SDK should be installed. Otherwise you will be still able to run the application but only in a web browser. In order to install Cordova open terminal application and run this command:

npm install -g cordova

For more information about preparing your environment for mobile development read official Cordova Get started fast steps and our instructions for iOS and Android.

# Start developing

Extract project archive and open Application folder in terminal. Then we will need to install necessary NodeJS dependencies. This is required only for the first time. To do it run this command:

npm install

Then you can run application with this command:

npm run dev

This will run local server serving application at localhost:8080 (you can change port number in Application\config\index.js). So you will see working application in your browser immediately. Even more it will do hot reloads when you will change any code or style.

To get familiar with the application structure we suggest you to read our TODOs tutorial.

# Personalize the app

At first you can update package.json with your project data:

{
    "name": "yourapp",
    "version": "1.0.0",
    "description": "[Your Application Description]",
    "author": "Name Surname <email@example.com>",
	...
}

In order to add your logo to the project we recommend you to use generator for getting set of all necessary icons. And then just put them into Application\static\images\icons\.

In your application you will definitely need your custom set of icons. For better performance and smaller app size we use in project only icons that it needs. We don't attach enormous icon packs.

But you can add any icon you want using great project called Fontello. Detailed instructions about adding new icons to Vue Mobile can be found in our tutorial.