Created
October 24, 2016 10:13
-
-
Save mediavrog/ea0b9d76fd4a4ea93c435fb73004cb20 to your computer and use it in GitHub Desktop.
Simple bootstrapping for a VueJS app with I18n, Routing and http client
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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