Skip to content
Vue Native Starter App with Login, News Feed and Sidebar using Vuelidate and Vuex
Branch: master
Clone or download
Latest commit 983b887 Aug 8, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Initial commit Jun 28, 2018
gif gif updated Jul 3, 2018
ios Initial commit Jun 28, 2018
.buckconfig Initial commit Jun 28, 2018
.gitignore Initial commit Jun 28, 2018
LICENSE License Jul 13, 2018 Update Aug 8, 2018
app.json Initial commit Jun 28, 2018


Sample Login App with Vue Native and Vuex with Validations


vue-native-starter app


  • Clone and install packages
git clone
cd vue-native-starter-app
  • 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.



You can’t perform that action at this time.