Entry and Polyfills

In this section of the tutorial we'll look at the main entry point for the app...

What is in the Main Entry?

The main entry point for the application:

import Vue from 'vue'
import router from './router'
import store from './vuex'
import { sync } from 'vuex-router-sync'
import http from './http'
import auth from './auth'
import Buefy from 'buefy'
import URLSearchParams from 'url-search-params'
import App from './app'
import MainNav from './features/common/main/nav'
import MainFooter from './features/common/main/footer'

Vue.config.productionTip = false

// Polyfills
global.URLSearchParams = URLSearchParams

// Sync router to store, as `store.state.route`.
sync(store, router)

// Http and Auth plugins
Vue.use(http)
Vue.use(auth)

// Buefy/Bulma UI Framework.
Vue.use(Buefy)

// Styles
require('./styles/scss/main.scss')
require('./styles/stylus/main.styl')

// Global Components
Vue.component('main-nav', MainNav)
Vue.component('main-footer', MainFooter)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Polyfills

Let's install a polyfill for URLSearchParams and override the global for it to act as a polyfill:

$ npm install url-search-params --save-dev