Entry and Polyfills

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

Main Entry

The main entry point for the application:

main.js

import Vue from 'vue'
import store from './store'
import { sync } from 'vuex-router-sync'
import { http, router } from './http'
import auth from './auth'
import Vuetify from 'vuetify'
import URLSearchParams from 'url-search-params'
import App from './app'
import Loading from './components/loading'
import Appbar from './components/app-bar'
import Appfooter from './components/app-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)

// Vuetify
Vue.use(Vuetify, {
  theme: {
    primary: '#21CE99',
    secondary: '#D81B60',
    accent: '#805441'
  }
})

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

// Global Components
Vue.component('loading', Loading)
Vue.component('Appbar', Appbar)
Vue.component('Appfooter', Appfooter)

/* 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

In our main.js we simply replace the global (browser environment):

main.js

// ...

// Polyfills
global.URLSearchParams = URLSearchParams