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
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()
})
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/
@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.
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.
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
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
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