Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. raphox
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    raphox

    @raphox

    3
    Reputation
    9
    Posts
    1055
    Profile views
    1
    Followers
    0
    Following
    Joined Last Online

    raphox Follow

    Posts made by raphox

    • RE: Vue-router + Vuex + Stack navigator

      @Fran-Diox Hi.

      I think your code is simple but really works.

      In my second code Im giving attention to:

      • direct access by url without referer. Like you.
      • store home page on the stack of pages
      • links with history.back()
      • controll push or pop to animation based on level route access

      @Eric-Hughes I will create. Thanks for your interest.

      posted in Onsen UI
      raphox
    • RE: onsenui 2 + vue 2 template with custom debugger

      Sorry @mjessen . This is all that I know.

      Until today, I use simply native features. Many times I use the device deploy only for test splitscreen, cam and broken layout. For this, I dont need livereload on device, for other, I use npm run dev and debug on browser.

      Maybe you considered use any of these https://play.google.com/store/search?q=cordova&c=apps

      posted in Monaca Tools
      raphox
    • RE: Vue-router + Vuex + Stack navigator

      Refactoring my code:

      router.beforeEach((to, from, next) => {
        store.commit('splitter/toggle', false)
      
        // When user access root path, clear stack before ends request
        if (to.path === '/') {
          store.commit('navigator/reset', HomePage)
          return next()
        }
      
        const toMatch = to.matched[to.matched.length - 1].components['default']
        const toParentMatch = to.matched[to.matched.length - 2]
          ? to.matched[to.matched.length - 2].components['default']
          : null
        const fromParentMatch = from.matched[from.matched.length - 2]
          ? from.matched[from.matched.length - 2].components['default']
          : null
      
        if (from.name && (toMatch === fromParentMatch || store.state.navigator.goingBack)) {
          store.commit('navigator/pop')
        } else if (toParentMatch === fromParentMatch) {
          store.commit('navigator/push', toMatch)
        } else {
          const stack = to.matched.map((item) => item.components['default'])
          store.commit('navigator/reset', [HomePage].concat(stack))
        }
      
        next()
      })
      
      posted in Onsen UI
      raphox
    • RE: onsenui 2 + vue 2 template with custom debugger

      I never use Monaca cloud services. Maybe its possible.

      But when I want debug my apps I build and use Android Studio to launch my app on mobile device. See more in http://cordova.apache.org/docs/en/dev/guide/platforms/android/index.html#debugging

      And after I can access browser console with https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

      posted in Monaca Tools
      raphox
    • RE: Vue.js + Cordova / Where is cordova.js

      @Fran-Diox I know that cordova.js is generated by Cordova, but I know too that is files required in index.html when my app is executing on Android device.

      I inserted cordova-loader.js in my index.html:

        <body>
          <div id="app"></div>
          <!-- built files will be auto injected -->
          <script src="static/cordova-loader.js"></script>
        </body>
      

      The script cordova-loader.js knows when I open the app on android devise and includes the cordova.js dynamically. Its working, but I do not know why this does not exist in the template.

      From what I’ve been researching, I should necessarily use Monaca to generate my mobile application. But I’m directly using the cordova build android command.

      posted in Onsen UI
      raphox
    • RE: onsenui 2 + vue 2 template with custom debugger

      When use command npm run dev you create a server with Express and Webpack runtime.

      You need build (compile .vue files) client files with the command npm run build. This command generate compiled files in www.

      Now you have production files in www. When you execute command cordova build android, this command get files in www and copy to platforms/android.

      posted in Monaca Tools
      raphox
    • Vue.js + Cordova / Where is cordova.js

      Where is cordova.js in template https://github.com/OnsenUI/vue-cordova-webpack ?

      To use cordova features we need cordova.js file on index.html, but no existis in that template. Why?

      I found a external solution https://github.com/monaca/monaca-component-cordova-loader/blob/master/cordova-loader.js

      posted in Onsen UI
      raphox
    • RE: Start your Vue Mobile App Now. Onsen UI for Vue 2 Beta Release

      Hi! I want to give my two cents.

      I would like to share with all an alternative that I developed to join the vue-router and the Onsen navigator.

      https://community.onsen.io/topic/1558/vue-router-vuex-stack-navigator

      posted in News & Announcements
      raphox
    • Vue-router + Vuex + Stack navigator

      I would like to share with you an alternative that I developed to join the vue-router and the Onsen navigator.

      I have not yet integrated 100% with all the features of the vue-router, but it is already possible to navigate between the routes managing the stack navigation.

      Based on Kitchensink (https://github.com/OnsenUI/vue-onsenui-kitchensink/blob/master/src/store.js), I created my navigation store too.

      export default {
        strict: true,
        namespaced: true,
        state: {
          goingBack: false, // Its used when user click on back button
          stack: [],
          options: {
            animation: 'slide'
          }
        },
        mutations: {
          push (state, page) {
            state.stack.push(page)
          },
          pop (state) {
            state.goingBack = false
      
            if (state.stack.length > 1) {
              state.stack.pop()
            }
          },
          replace (state, page) {
            state.stack.pop()
            state.stack.push(page)
          },
          reset (state, page) {
            state.goingBack = false
      
            state.stack = [page || state.stack[0]]
          },
          options (state, newOptions = {}) {
            state.options = newOptions
          },
          toggleGoingBack (state, shouldGoingBack) {
            if (typeof shouldGoingBack === 'boolean') {
              state.goingBack = shouldGoingBack
            } else {
              state.goingBack = !state.goingBack
            }
          }
        }
      }
      

      I used goingBack to router knows when the user is using a route with same level but is going back.

      And my app component is:

      <template lang="pug">
        v-ons-splitter
          v-ons-splitter-side(swipeable collapse="" width="260px"
            :open.sync="splitterIsOpen")
            menu-page
      
          v-ons-splitter-content
            v-ons-navigator(
              :page-stack="pageStack"
              :pop-page="storePop"
              :options="options")
      </template>
      
      <script>
      import MenuPage from './pages/Menu'
      
      export default {
        computed: {
          pageStack () {
            return this.$store.state.navigator.stack
          },
          options () {
            return this.$store.state.navigator.options
          },
          splitterIsOpen: {
            get () {
              return this.$store.state.splitter.open
            },
            set (newValue) {
              this.$store.commit('splitter/toggle', newValue)
            }
          }
        },
        methods: {
          storePop () {
            this.$store.commit('navigator/toggleGoingBack')
      
            if (window.history.length <= 2) {
              this.$router.push({ name: 'home' })
            } else {
              this.$router.go(-1)
            }
          }
        },
        components: {
          MenuPage
        }
      }
      </script>
      

      And after this, I need to tell the router how his work will stack navigation:

      import Vue from 'vue'
      import Router from 'vue-router'
      
      import store from '@/store'
      import HomePage from '@/pages/Home'
      import HostPage from '@/pages/Host'
      import HostItemPage from '@/pages/HostItem'
      
      Vue.use(Router)
      
      const router = new Router({
        routes: [
          { path: '/', name: 'home', component: HomePage },
          {
            path: '/host/:profile?',
            name: 'host',
            component: HostPage,
            children: [
              {
                path: 'items/:item?',
                name: 'host-item',
                component: HostItemPage
              }
            ]
          }
        ]
      })
      
      router.beforeEach((to, from, next) => {
        store.commit('splitter/toggle', false)
      
        // When user access root path, clear stack before ends request
        if (to.path === '/') {
          store.commit('navigator/reset', HomePage)
          return next()
        }
      
        // Every time when stack is empty, push `HomePage` as first
        if (store.state.navigator.stack.length <= 0) {
          store.commit('navigator/push', HomePage)
        }
      
        // Based on https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js#L21
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
      
        if (from.name && (toDepth < fromDepth || store.state.navigator.goingBack)) {
          store.commit('navigator/pop')
        } else {
          if (toDepth === fromDepth) {
            const item = to.matched[to.matched.length - 1]
      
            store.commit('navigator/push', item.components['default'])
          } else {
            store.commit('navigator/reset')
      
            to.matched.forEach((item) => {
              store.commit('navigator/push', item.components['default'])
            })
          }
        }
      
        next()
      })
      
      export default router
      
      posted in Onsen UI
      raphox