Skip to content

Instantly share code, notes, and snippets.

@mediavrog
Created Oct 24, 2016
Embed
What would you like to do?
Simple bootstrapping for a VueJS app with I18n, Routing and http client
// VueJS with Router, I18n and simple http client
import Vue from "vue"
import VueI18n from "vue-i18n"
import VueRouter from "vue-router"
import VueResource from 'vue-resource'
// 2 pages for the app states
import Splash from "./pages/Splash.vue"
import Main from "./pages/Main.vue"
import App from "./App.vue"
// i18n strings
import * as EN from "./modules/locale_en"
// simple api wrapper allows the app to run in browser and as chrome extension
import PseudoChrome from "./modules/chrome"
// global
window.Env = new PseudoChrome()
// support webapp vs extension styles
document.body.classList.add(PseudoChrome.isExtension() ? 'ext' : 'brs')
// routing
Vue.use(VueRouter)
// http client
Vue.use(VueResource)
// i18n
Vue.use(VueI18n)
let locale = (window.navigator && (window.navigator.userLanguage || window.navigator.language)) || ''
Vue.config.lang = locale && locale.length > 1 ? locale.split('-')[0] : 'en'
document.documentElement.lang = Vue.config.lang
Vue.locale('en', EN.STRINGS)
// setup the app states
const routes = [
{path: '/', component: Splash},
{path: '/main', component: Main}
]
// setup the router
const router = new VueRouter({
routes // short for routes: routes
})
new Vue({ // eslint-disable-line no-new
el: '#app',
router,
render: (h) => h(App)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment