1 | /**
|
2 | * app.js is the universal entry to our app. In a client-only app, we would
|
3 | * create the root Vue instance right in this file and mount directly to DOM.
|
4 | * However, for SSR that responsibility is moved into the client-only entry
|
5 | * file. app.js simply exports a createApp function
|
6 | */
|
7 | import Vue from 'vue'
|
8 | import VueTouch from 'vue-touch-hotfix'
|
9 | import App from 'src/app.vue'
|
10 | import Client from 'cubic-client'
|
11 | import { createRouter } from './router'
|
12 | import { createStore } from './store'
|
13 | import { sync } from 'vuex-router-sync'
|
14 |
|
15 | // export a factory function for creating fresh app, router and store
|
16 | // instances
|
17 | export function createApp () {
|
18 | /* eslint no-undef: "off" */
|
19 | Vue.prototype.$cubic = new Client({
|
20 | api_url: $apiUrl,
|
21 | auth_url: $authUrl
|
22 | })
|
23 |
|
24 | const router = createRouter()
|
25 | const store = createStore(Vue.prototype.$cubic)
|
26 |
|
27 | // sync the router with the vuex store.
|
28 | // this registers `store.state.route`
|
29 | sync(store, router)
|
30 |
|
31 | // Add vue-touch. Not sure if this should be added by default.
|
32 | Vue.use(VueTouch)
|
33 |
|
34 | // create the app instance.
|
35 | // here we inject the router, store and ssr context to all child components,
|
36 | // making them available everywhere as `this.$router` and `this.$store`.
|
37 | const app = new Vue({
|
38 | router,
|
39 | store,
|
40 | render: createElement => createElement(App)
|
41 | })
|
42 | return { app, router, store }
|
43 | }
|