Sergi Tur Badenas acacha

Computer Science Teacher at Institut Ebre and Open Source contributor in my free time. Creator of adminlte-laravel

acacha / welcome.blade.php

Created April 16, 2018 15:33

Example welcome Page with laravel blade and Vuetify

	<!DOCTYPE html>
	<html lang="{{ app()->getLocale() }}">
	<head>
	<title>{{ config('app.name') }}</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons' rel="stylesheet">
	<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
	<style>

acacha / welcome.blade.php

Created April 16, 2018 15:38

welcome.blade.php extract

	<login-button action="{{ $action or null }}" ></login-button>
	<register-button action="{{ $action or null }}" ></register-button>
	<remember-password action="{{ $action or null }}"></remember-password>
	<reset-password
	action="{{ $action or null }}"
	token="{{ $token or null }}"
	email="{{ $email or null }}"></reset-password>

acacha / app.js

Created April 16, 2018 15:43

Laravel resources/assets/js/app.js file with Vuetify and Vuex with Auth scaffolding components


	/**
	* First we will load all of this project's JavaScript dependencies which
	* includes Vue and other libraries. It is a great starting point when
	* building robust, powerful web applications using Vue and Laravel.
	*/

	require('./bootstrap');

	window.Vue = require('vue');

acacha / boostrap.js

Created April 16, 2018 15:46

Laravel resources/assets/js/bootstrap.js File with Vuetify

	/**
	* We'll load the axios HTTP library which allows us to easily issue requests
	* to our Laravel back-end. This library automatically handles sending the
	* CSRF token as a header based on the value of the "XSRF" token cookie.
	*/

	window.axios = require('axios');

	window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

acacha / interactsWithGravatar.js

Created April 16, 2018 15:52

	import gravatar from 'gravatar'

	export default {
	methods: {
	gravatarURL (email) {
	return gravatar.url(email)
	}
	}
	}

acacha / withSnackbar.js

Created April 16, 2018 15:53

	import * as mutations from '../../store/mutation-types'
	import { mapGetters } from 'vuex'

	export default {
	computed: {
	...mapGetters([
	'snackbarTimeout'
	])
	},
	methods: {

acacha / GravatarComponent.vue

Created April 16, 2018 15:53

	<template>
	<v-avatar class="mt-1 mb-1" :size="size" >
	<img :src="gravatarURL(user.email)" alt="avatar">
	</v-avatar>
	</template>

	<style>

	</style>

acacha / auth.js

Created April 16, 2018 15:54

	import axios from 'axios'

	export default {
	login (credentials) {
	return axios.post('/login', credentials)
	},
	logout () {
	return axios.post('/logout')
	},
	register (user) {

acacha / sleep.js

Created April 16, 2018 15:55

	export default (ms) => {
	return new Promise((resolve,reject) => {
	setTimeout(() => {
	resolve()
	}, ms)
	})
	}

acacha / action-types.js

Created April 16, 2018 15:56

	// AUTH MODULE
	export const LOGIN = 'LOGIN'
	export const LOGOUT = 'LOGOUT'
	export const REGISTER = 'REGISTER'
	export const REMEMBER_PASSWORD = 'REMEMBER_PASSWORD'
	export const RESET_PASSWORD = 'RESET_PASSWORD'

	// USERS MODULE
	export const FETCH_USERS = 'FETCH_USERS'
	export const UPDATE_USER = 'UPDATE_USER'