https://github.com/geekyAnts/vue-native-starter-app

Vue Native Starter App with Login, News Feed and Sidebar using Vuelidate and Vuex
https://github.com/geekyAnts/vue-native-starter-app

Last synced: 3 months ago
JSON representation

Vue Native Starter App with Login, News Feed and Sidebar using Vuelidate and Vuex

• Host: GitHub
• URL: https://github.com/geekyAnts/vue-native-starter-app
• Owner: GeekyAnts
• License: mit
• Created: 2018-06-28T12:51:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-09T04:08:58.000Z (over 5 years ago)
• Last Synced: 2024-04-21T07:35:18.091Z (7 months ago)
• Language: Vue
• Size: 5.95 MB
• Stars: 140
• Watchers: 11
• Forks: 51
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

## Title

Sample Login App with Vue Native and Vuex with Validations

## Demo



## Installation

* **Clone and install packages**

```

git clone https://github.com/GeekyAnts/vue-native-starter-app.git

cd vue-native-starter-app

yarn

```

* **Run on iOS**

    * Run `react-native run-ios` in your terminal

- **Run on Android**

    * Make sure you have an `Android emulator` installed and running

    * Run `react-native run-android` in your terminal

## Libraries used

* **Packages Used**

    * native-base: 2.6.1

    * react: 16.3.1

    * react-native: 0.55.4

    * vue-native-core: 0.0.7

    * vue-native-helper: 0.0.8

    * vue-native-router: 0.0.1-alpha.3

    * vuelidate: 0.7.4

    * vuex: 3.0.1

## Folder structure

   The source files are located in `src` folder. All the assets file are under assets folder.

    All the screens which refer to the main route (Entry Points) are under `screen` and the compenents related to those screens are inside `components`.

## Usage of vuelidate and vuex 

* Validation

    Since vuelidate cannot identify the events for dirty natively. We can $touched for a partiuclar event to mark a field as dirty. For example in login.vue, for email field we have used `:on-blur="() => $v.emailValue.$touch()"` to mark a field as dirty when the field loses it's focus.

* Store

    We have used vuex for state management. The actions, mutations and the store are specified under `store/index.js`. The actions specify the action which are fired using `store.dispatch` method. The mutations specify the modifications on an object for a particular action.

## License

[MIT](http://opensource.org/licenses/MIT)