Vue.js Example - Gists · GitHub

Skip to content Search Gists Search Gists All gists Back to GitHub Sign in Sign up Sign in Sign up Dismiss alert {{ message }}

Instantly share code, notes, and snippets.

martinlindhe/App.vue Created December 10, 2015 23:03 Show Gist options

• Download ZIP

• Star 8 (8) You must be signed in to star a gist
• Fork 0 (0) You must be signed in to fork a gist

• Embed Select an option
  • Embed Embed this gist in your website.
  • Share Copy sharable link for this gist.
  • Clone via HTTPS Clone using the web URL.

  No results found

  Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/martinlindhe/6ac4702c08ea1a0ba406.js"></script>
• Save martinlindhe/6ac4702c08ea1a0ba406 to your computer and use it in GitHub Desktop.

Code Revisions 1 Stars 8 Embed Select an option

• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.

No results found

Learn more about clone URLs Clone this repository at <script src="https://gist.github.com/martinlindhe/6ac4702c08ea1a0ba406.js"></script> Save martinlindhe/6ac4702c08ea1a0ba406 to your computer and use it in GitHub Desktop. Download ZIP vue.js example Raw App.vue This file contains hidden or 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 Show hidden characters

<template>

<div>

<nav-bar></nav-bar>

<cookie-info></cookie-info>

<router-view></router-view>

<corporate-footer></corporate-footer>

</div>

</template>

<script>

import moment from 'moment';

import Vue from 'vue';

import NavBar from './components/NavBar.vue';

import CookieInfo from './components/CookieInfo.vue';

import CorporateFooter from './components/Footer/Corporate.vue';

export default {

data() {

return {

username: '',

email: '',

locale: '', // "sv_SE"

token: '', // jwt-auth

_refreshTokenTimer: null,

// all accessible shops

shops: [],

// currently selected shop

shop: {},

locales: [

{

code: 'sv_SE',

name: 'Svenska'

},

{

code: 'en_US',

name: 'American English'

}

]

}

},

components: {

NavBar,

CookieInfo,

CorporateFooter,

},

ready() {

this.username = window.localStorage.getItem('_username');

this.email = window.localStorage.getItem('_email');

this.locale = window.localStorage.getItem('_locale');

this.token = window.sessionStorage.getItem('_token');

this.shops = JSON.parse(window.localStorage.getItem('_shops'));

this.shop = JSON.parse(window.localStorage.getItem('_shop'));

if (!Boolean(this.locale)) {

this.locale = this.defaultLocale();

console.log('no locale pref found, defaulting to ' + this.locale);

}

console.log("[booted] vue " + Vue.version + ", locale " + this.locale);

if (Boolean(this.token)) {

console.log("re-using token: " + this.token);

// jwt-auth

Vue.http.headers.common['Authorization'] = 'Bearer ' + this.token;

this.refreshToken();

}

},

methods: {

refreshToken() {

console.log("refreshing api token ... " + moment());

this.registerRefreshTokenTimer();

this.$http.get('/api/auth/refresh-token', function (data, status, request) {

console.log("success refreshing token");

Vue.http.headers.common['Authorization'] = 'Bearer ' + data.token;

this.$root.token = data.token;

window.sessionStorage.setItem('_token', data.token);

}).error(function (data, status, request) {

console.error("error refreshing token, ending session");

console.log(data);

this.clearRefreshTokenTimer();

this.endSession();

});

},

registerRefreshTokenTimer() { // private

//this.clearRefreshTokenTimer();

if (!Boolean(this.token)) {

console.error("registerRefreshTokenTimer called without a token");

return;

}

var intervalMillisec = 300 * 1000; // 300s = 5m

this._refreshTokenTimer = setTimeout(this.refreshToken, intervalMillisec);

},

clearRefreshTokenTimer() { // private

if (Boolean(this._refreshTokenTimer)) {

clearTimeout(this._refreshTokenTimer);

}

console.log("XXXX clearing Authorization header");

Vue.http.headers.common['Authorization'] = '';

},

defaultLocale() {

var loc = navigator.languages != undefined ? navigator.languages[0] : navigator.language;

// "en-US" => "en_US"

loc = loc.replace('-', '_');

//console.log("browser locale is " + loc);

var ok = ['sv_SE', 'en_US'];

if (!ok.contains(loc)) {

console.log("unsupported browser locale " + loc + ", defaulting to " + Vue.config.lang);

return Vue.config.lang;

}

return loc;

},

logout() {

console.log("logging out");

this.clearRefreshTokenTimer();

if (!Boolean(this.token)) {

return;

}

var resource = this.$http.get('/api/auth/logout', function (data, status, request) {

this.endSession();

this.$route.router.go('/');

// XXX show alert popup with "You are now logged out."

}).error(function (data, status, request) {

console.error("error logging out, clearing session");

this.clearRefreshTokenTimer();

this.endSession();

this.$route.router.go('/');

});

}, endSession() {

this.$root.token = '';

window.sessionStorage.setItem('_token', '');

Vue.http.headers.common['Authorization'] = '';

}

}

}

</script>

Raw bootstrap.js This file contains hidden or 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 Show hidden characters

import Vue from 'vue';

import VueAsyncData from 'vue-async-data';

import VueInternationalization from 'vue-i18n';

import VueResource from 'vue-resource';

import VueRouter from 'vue-router';

import VueValidator from 'vue-validator';

Vue.config.debug = true;

// XXX move to function file

Array.prototype.contains = function(obj) {

var i = this.length;

while (i--) {

if (this[i] === obj) {

return true;

}

}

return false;

}

// generated from Laravel translations with "php artisan vue-i18n:generate"

import Locales from './vue-i18n-locales.generated.js';

var locale = window.localStorage.getItem('_locale');

if (!locale) {

locale = 'sv_SE';

}

Vue.use(VueInternationalization, {

lang: locale,

locales: Locales

});

Vue.use(VueAsyncData);

Vue.use(VueResource);

Vue.use(VueRouter);

Vue.use(VueValidator);

import './moment-locales.js';

import moment from 'moment';

moment.locale(locale);

// **********

// ** ROUTES

// **********

const router = new VueRouter({

hashbang: false

});

import App from './App.vue';

import MainView from './views/Main.vue';

import AuthLoginView from './views/Auth/Login.vue';

import AuthRegisterView from './views/Auth/Register.vue';

import ContactView from './views/Corporate/Contact.vue';

import ShopShowView from './views/Shop/Show.vue';

import ShopProductsView from './views/Shop/Products.vue';

router.map({

'/': { component: MainView },

'/auth/login': { component: AuthLoginView },

'/auth/register': { component: AuthRegisterView },

'/contact': { component: ContactView },

'/shop/show/:id': { component: ShopShowView },

'/shop/products': { component: ShopProductsView },

});

// Redirect to the home route if any routes are unmatched

router.redirect({

'*': '/'

});

router.start(App, '#app');

Raw MainView.vue This file contains hidden or 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 Show hidden characters

<template>

<div>

whopp main

</div>

</template>

<script>

export default {

created() {

// console.log('main created!');

}

}

</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment You can’t perform that action at this time.