Error in vue

[evolutionjay]

F7 version ：1.5.3 F7-vue version : 0.8.3

vue version : 2.1.10

setup with vue-cli npm install --save framework7 npm install --save framework7-vue ...

setup the main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import "babel-polyfill"
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'

import Framework7 from 'framework7'
import Framework7Vue from 'framework7-vue'

import Framework7Theme from './assets/css/framework7/framework7.material.css'
import Framework7ThemeColors from './assets/css/framework7/framework7.material.colors.css'
import './assets/css/fontawesome/font-awesome.less'

import Routes from './routes.js'
import store from './store'

Vue.use(Framework7Vue)
Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  store,
  framework7: {
    root: '#app',
    material: true,
    routes: Routes,
  },
  components: { App },
  mounted() {
    console.log('App mounted');
  }
})

npm run dev

[nolimits4web]

What is in your routes.js?

[evolutionjay]

@nolimits4web routes.js is empty

[evolutionjay]

oh, router can not be empty

[jjljyn]

@evolutionjay Hey, I got a similar issue but my Routes is not empty.And I want to know how did you fix this issue?

main.js

// Import Vue
import Vue from 'vue'

// Import F7
import Framework7 from 'framework7'

// Import F7 Vue Plugin
import Framework7Vue from 'framework7-vue'

// Import F7 iOS Theme Styles
import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css'

// Import App Custom Styles
import AppStyles from './assets/sass/main.scss'
import framework7Icons from './assets/css/framework7-icons.css'

// Import Routes
import Routes from './routes.js'

Vue.use(Framework7Vue)

/* eslint-disable no-new */
var vue= new Vue({
  el: '#app',
  template: '<app/>',
  store,
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    animateNavBackIcon: true,
    routes: Routes,
    preroute: function (view, options) {
      //TODO: Determine whether logged in or not
    },
  },
  components: {
    app: App
  },
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from 'mutation-types.js'

Vue.use(Vuex)
Vue.config.debug = true

const debug = process.env.NODE_ENV !== 'production'

const state = {
  loggedIn: false,
}

const mutations = {
  [types.IS_LOGGED_IN] (state, value) {
    state.loggedIn = value
    console.log(state.loggedIn)
  }
}

const actions = {
  loginAction (context, value) {
    console.log('in loginAction actions')
    context.commit(types[IS_LOGGED_ID], value)
  }
}

export default {
  state,
  mutations,
  actions,
  strict: debug
}

route.js

export default [
  {
    path: '/login/',
    component: require('./login.vue')
  }
]

And I got errors like your.

Error happened on main chain:
Error: Error happened when webpack build: Error: Command failed: "/Applications/XAMPP/xamppfiles/htdocs/UN42Mobile/node_modules/.bin/webpack"

    at exec (/Applications/XAMPP/xamppfiles/htdocs/UN42Mobile/hooks/hookers.js:187:19)
    at ChildProcess.exithandler (child_process.js:277:5)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:897:16)
    at Socket.stream.socket.on (internal/child_process.js:340:11)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at Pipe._handle.close [as _onclose] (net.js:549:12)
Error: Error happened when webpack build: Error: Command failed: "/Applications/XAMPP/xamppfiles/htdocs/UN42Mobile/node_modules/.bin/webpack"

And I just put the context of store.js into my main.js to solve this issue. Here is my code.

import Vue from 'vue'
import Framework7 from 'framework7'
import Framework7Vue from 'framework7-vue'
import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css'
import AppStyles from './assets/sass/main.scss'
import framework7Icons from './assets/css/framework7-icons.css'
import Routes from './routes.js'
import Vuex from 'vuex'
import App from './main.vue'
import * as types from './vuex/mutation-types.js'
import {IS_LOGGED_IN} from "src/vuex/mutation-types";

Vue.use(Framework7Vue)
Vue.use(Vuex)

const state = {
  loggedIn: false,
}

const mutations = {
  [types.IS_LOGGED_IN] (state, value) {
    state.loggedIn = value
    console.log('types.IS_LOGGED_IN', state.loggedIn)
  }
}

const actions = {
  loginAction (context, value) {
    console.log('in loginAction actions')
    context.commit(types[IS_LOGGED_IN], value)
  }
}

var store = new Vuex.Store({
  state,
  mutations,
  actions,
})

var vue= new Vue({
  el: '#app',
  template: '<app/>',
  store,
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app',
    animateNavBackIcon: true,
    routes: Routes,
    preroute: function (view, options) {
      //TODO: Determine whether logged in or not
    },
  },
  components: {
    app: App
  },
})