Skip to content

Instantly share code, notes, and snippets.

@g0ld3lux
Last active December 13, 2019 14:36
Show Gist options
  • Save g0ld3lux/a2105f1a77d91bb09d55446adbc445de to your computer and use it in GitHub Desktop.
Save g0ld3lux/a2105f1a77d91bb09d55446adbc445de to your computer and use it in GitHub Desktop.
Setting up vue material + laravel 5.4

This set Up is Utilizing Vue , Vue Material, Vue-Router, Axios, and Laravel

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth',['except' => 'home']);
}
// Test first the View we Want to Use
public function home()
{
$data = ['test', 'test1'];
return view('app', ['data' => $data]);
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function dashboard()
{
return view('home');
}
}
import './bootstrap';
import './theme';
import router from './routes';
const app = new Vue({
el: '#app',
data: {
},
router,
methods: {
toggleSidenav() {
this.$refs['main-sidebar'].toggle();
},
closeSidenav() {
this.$refs['main-sidebar'].close();
}
}
})
import Vue from 'vue';
import axios from 'axios';
import VueRouter from 'vue-router';
import VueMaterial from 'vue-material';
window.Vue = Vue;
Vue.use(VueRouter);
Vue.use(VueMaterial);
window.axios = axios;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">List All Campaign</div>
<ul v-for="campaign in campaigns.data">
<li>{{ campaign.name }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
campaigns: []
}
},
created() {
axios.get('/api/v1/campaigns')
.then(({data}) => this.campaigns = data);
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Home Page</div>
Home Page is Serve!
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Home page is Serve! Voila!');
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Show All Lists</div>
<ul v-for="list in lists.data">
<li>{{ list.name }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: []
}
},
created() {
axios.get('/api/v1/lists')
.then(({data}) => this.lists = data);
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Metrics</div>
<ul v-for="metric in metrics.data">
<li>{{ metric.name }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
metrics: []
}
},
created() {
axios.get('/api/v1/metrics')
.then(({data}) => this.metrics = data);
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Our User ID Params : {{ $route.params.id }} </div>
Get Person Data : Try this Sample IDs: D623MV ,zUjXqP, AFJbe9
<ul v-for="(value, attribute) in person">
<li v-if="value">{{ attribute }} : {{ value }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
person: '',
}
},
created() {
axios.get('/api/v1/person/' + this.$route.params.id)
.then(({data}) => this.person = data);
}
}
</script>
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Show All Templates</div>
<ul v-for="template in templates.data">
<li>{{ template.name }}</li>
<div v-html="template.html"></div>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
templates: []
}
},
created() {
axios.get('/api/v1/email-templates')
.then(({data}) => this.templates = data);
}
}
</script>
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
name: 'home',
component: require('./pages/Home')
},
{
path: '/metrics',
name: 'metrics.index',
component: require('./pages/Metrics/Index')
},
{
path: '/person/:id?',
name: 'person.show',
component: require('./pages/Person/Show')
},
{
path: '/lists',
name: 'lists.index',
component: require('./pages/Lists/Index')
},
{
path: '/campaigns',
name: 'campaigns.index',
component: require('./pages/Campaigns/Index')
},
{
path: '/templates',
name: 'templates.index',
component: require('./pages/Templates/Index')
},
];
export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});
import Vue from 'vue';
import VueMaterial from 'vue-material';
Vue.use(VueMaterial);
Vue.material.registerTheme({
default: {
primary: 'blue',
accent: 'pink'
},
blue: {
primary: 'blue',
accent: 'pink'
},
indigo: {
primary: 'indigo',
accent: 'pink'
},
brown: {
primary: 'brown',
accent: 'green'
},
purple: {
primary: 'purple',
accent: 'blue'
},
orange: {
primary: 'orange',
accent: 'purple'
},
green: {
primary: 'green',
accent: 'pink'
},
'light-blue': {
primary: 'light-blue',
accent: 'yellow'
},
teal: {
primary: 'teal',
accent: 'orange'
},
'blue-grey': {
primary: 'blue-grey',
accent: 'blue'
},
cyan: {
primary: 'cyan',
accent: 'pink'
},
red: {
primary: 'red',
accent: 'pink'
},
white: {
primary: 'white',
accent: 'blue'
},
grey: {
primary: {
color: 'grey',
hue: 300
},
accent: 'indigo'
}
});
/* Common */
$font-roboto: Roboto, 'Noto Sans', Noto, sans-serif;
/* Responsive Breakpoints */
$breakpoint-xsmall: 600px !default;
$breakpoint-small: 960px !default;
$breakpoint-medium: 1280px !default;
$breakpoint-large: 1920px !default;
/* Transitions - Based on Angular Material */
$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
$swift-ease-in-duration: .3s !default;
$swift-ease-in-timing-function: cubic-bezier(.55, 0, .55, .2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
$swift-ease-in-out-duration: .5s !default;
$swift-ease-in-out-timing-function: cubic-bezier(.35, 0, .25, 1) !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
$swift-linear-duration: .15s !default;
$swift-linear-timing-function: linear !default;
$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
$material-enter-duration: .3s;
$material-enter-timing-function: cubic-bezier(.0, .0, .2, 1);
$material-enter: all $material-enter-duration $material-enter-timing-function;
$material-leave-duration: .3s;
$material-leave-timing-function: cubic-bezier(.4, .0, 1, 1);
$material-leave: all $material-leave-duration $material-leave-timing-function;
/* Elevation - Based on Angular Material */
$shadow-key-umbra-opacity: .2 !default;
$shadow-key-penumbra-opacity: .14 !default;
$shadow-ambient-shadow-opacity: .12 !default;
$material-shadow-1dp: 0 1px 3px rgba(#000, $shadow-key-umbra-opacity),
0 1px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 2px 1px -1px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-2dp: 0 1px 5px rgba(#000, $shadow-key-umbra-opacity),
0 2px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 3px 1px -2px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-3dp: 0 1px 8px rgba(#000, $shadow-key-umbra-opacity),
0 3px 4px rgba(#000, $shadow-key-penumbra-opacity),
0 3px 3px -2px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-4dp: 0 2px 4px -1px rgba(#000, $shadow-key-umbra-opacity),
0 4px 5px rgba(#000, $shadow-key-penumbra-opacity),
0 1px 10px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-5dp: 0 3px 5px -1px rgba(#000, $shadow-key-umbra-opacity),
0 5px 8px rgba(#000, $shadow-key-penumbra-opacity),
0 1px 14px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-6dp: 0 3px 5px -1px rgba(#000, $shadow-key-umbra-opacity),
0 6px 10px rgba(#000, $shadow-key-penumbra-opacity),
0 1px 18px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-7dp: 0 4px 5px -2px rgba(#000, $shadow-key-umbra-opacity),
0 7px 10px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 2px 16px 1px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-8dp: 0 5px 5px -3px rgba(#000, $shadow-key-umbra-opacity),
0 8px 10px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 3px 14px 2px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-9dp: 0 5px 6px -3px rgba(#000, $shadow-key-umbra-opacity),
0 9px 12px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 3px 16px 2px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-10dp: 0 6px 6px -3px rgba(#000, $shadow-key-umbra-opacity),
0 10px 14px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 4px 18px 3px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-11dp: 0 6px 7px -4px rgba(#000, $shadow-key-umbra-opacity),
0 11px 15px 1px rgba(#000, $shadow-key-penumbra-opacity),
0 4px 20px 3px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-12dp: 0 7px 8px -4px rgba(#000, $shadow-key-umbra-opacity),
0 12px 17px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 5px 22px 4px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-13dp: 0 7px 8px -4px rgba(#000, $shadow-key-umbra-opacity),
0 13px 19px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 5px 24px 4px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-14dp: 0 7px 9px -4px rgba(#000, $shadow-key-umbra-opacity),
0 14px 21px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 5px 26px 4px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-15dp: 0 8px 9px -5px rgba(#000, $shadow-key-umbra-opacity),
0 15px 22px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 6px 28px 5px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-16dp: 0 8px 10px -5px rgba(#000, $shadow-key-umbra-opacity),
0 16px 24px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 6px 30px 5px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-17dp: 0 8px 11px -5px rgba(#000, $shadow-key-umbra-opacity),
0 17px 26px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 6px 32px 5px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-18dp: 0 9px 11px -5px rgba(#000, $shadow-key-umbra-opacity),
0 18px 28px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 7px 34px 6px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-19dp: 0 9px 12px -6px rgba(#000, $shadow-key-umbra-opacity),
0 19px 29px 2px rgba(#000, $shadow-key-penumbra-opacity),
0 7px 36px 6px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-20dp: 0 10px 13px -6px rgba(#000, $shadow-key-umbra-opacity),
0 20px 31px 3px rgba(#000, $shadow-key-penumbra-opacity),
0 8px 38px 7px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-21dp: 0 10px 13px -6px rgba(#000, $shadow-key-umbra-opacity),
0 21px 33px 3px rgba(#000, $shadow-key-penumbra-opacity),
0 8px 40px 7px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-22dp: 0 10px 14px -6px rgba(#000, $shadow-key-umbra-opacity),
0 22px 35px 3px rgba(#000, $shadow-key-penumbra-opacity),
0 8px 42px 7px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-23dp: 0 11px 14px -7px rgba(#000, $shadow-key-umbra-opacity),
0 23px 36px 3px rgba(#000, $shadow-key-penumbra-opacity),
0 9px 44px 8px rgba(#000, $shadow-ambient-shadow-opacity) !default;
$material-shadow-24dp: 0 11px 15px -7px rgba(#000, $shadow-key-umbra-opacity),
0 24px 38px 3px rgba(#000, $shadow-key-penumbra-opacity),
0 9px 46px 8px rgba(#000, $shadow-ambient-shadow-opacity) !default;
// @import "variables";
[v-cloak] {
display: none;
}
// Font
// Import Fonts For Vue Material
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
// Import All Styling for Vue-material
// @import "node_modules/vue-material/dist/vue-material";
// Css By Components
@import "node_modules/vue-material/dist/components/mdCore/index";
@import "node_modules/vue-material/dist/components/mdAvatar/index";
@import "node_modules/vue-material/dist/components/mdBackdrop/index";
@import "node_modules/vue-material/dist/components/mdBottomBar/index";
@import "node_modules/vue-material/dist/components/mdButton/index";
@import "node_modules/vue-material/dist/components/mdButtonToggle/index";
@import "node_modules/vue-material/dist/components/mdCheckbox/index";
@import "node_modules/vue-material/dist/components/mdChips/index";
@import "node_modules/vue-material/dist/components/mdDialog/index";
@import "node_modules/vue-material/dist/components/mdDivider/index";
@import "node_modules/vue-material/dist/components/mdFile/index";
@import "node_modules/vue-material/dist/components/mdIcon/index";
@import "node_modules/vue-material/dist/components/mdImage/index";
@import "node_modules/vue-material/dist/components/mdInputContainer/index";
@import "node_modules/vue-material/dist/components/mdLayout/index";
@import "node_modules/vue-material/dist/components/mdList/index";
@import "node_modules/vue-material/dist/components/mdMenu/index";
@import "node_modules/vue-material/dist/components/mdProgress/index";
@import "node_modules/vue-material/dist/components/mdRadio/index";
@import "node_modules/vue-material/dist/components/mdSelect/index";
@import "node_modules/vue-material/dist/components/mdSidenav/index";
@import "node_modules/vue-material/dist/components/mdSnackbar/index";
@import "node_modules/vue-material/dist/components/mdSpinner/index";
@import "node_modules/vue-material/dist/components/mdSubheader/index";
@import "node_modules/vue-material/dist/components/mdSwitch/index";
@import "node_modules/vue-material/dist/components/mdTable/index";
@import "node_modules/vue-material/dist/components/mdTabs/index";
@import "node_modules/vue-material/dist/components/mdToolbar/index";
@import "node_modules/vue-material/dist/components/mdTooltip/index";
@import "node_modules/vue-material/dist/components/mdWhiteframe/index";
@import "./app.scss";
@extends('layouts.app')
@section('title', 'Override Title Here')
@section('mainNav')
{{-- If Data is passed It will Be Used As Default Unless we Override it Using @slot('var') Directive --}}
@component('components.toolbar', ['icon' => 'menu', 'title' => 'My new Title'])
@endcomponent
@endsection
@section('sideNav')
@component('components.sidebar', ['title' => 'SideBar Title'])
<md-list>
<md-list-item>
<md-icon>home</md-icon><router-link tag="li" to="/" exact>Home</router-link>
</md-list-item>
<md-list-item>
<md-icon>poll</md-icon>
<span>Metrics</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Listing Metrics</router-link></md-list-item>
{{-- <md-list-item class="md-inset"><router-link tag="li" to="/metrics">List Event Timeline</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Specific Event</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Exporting metric data</router-link></md-list-item> --}}
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<md-icon>account_circle</md-icon>
<span>Profiles</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset"><router-link tag="li" :to="{ name: 'person.show', params: { id: 'D623MV' }}">Show Profile</router-link></md-list-item>
{{-- <md-list-item class="md-inset"><router-link tag="li" to="/metrics">Update Profile</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Batch Timeline</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Batch Timeline Specific Event</router-link></md-list-item> --}}
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<md-icon>view_list</md-icon>
<span>Lists</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset"><router-link tag="li" to="/lists">Lists in Account</router-link></md-list-item>
{{-- <md-list-item class="md-inset"><router-link tag="li" to="/metrics">Create List</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">List Information</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Update List</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Delete List</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Search List</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Search Segment</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Add To List</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Batch Add</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Batch Remove</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Unsubscribe</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Specific Exclusions</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Global Exclusions</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Unsubscribe All</router-link></md-list-item> --}}
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<md-icon>notifications_active</md-icon>
<span>Campaigns</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset"><router-link tag="li" to="/campaigns">Campaigns in Account</router-link></md-list-item>
{{-- <md-list-item class="md-inset"><router-link tag="li" to="/metrics">Create Campaign</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Campaign Information</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Update Campaign</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Send Campaign</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Schedule Campaign</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Cancel Campaign</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Clone Campaign</router-link></md-list-item> --}}
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<md-icon>assignment</md-icon>
<span>Templates</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset"><router-link tag="li" to="/templates">List Templates</router-link></md-list-item>
{{-- <md-list-item class="md-inset"><router-link tag="li" to="/metrics">Create Template</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Update Template</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Delete Template</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Clone Template</router-link></md-list-item>
<md-list-item class="md-inset"><router-link tag="li" to="/metrics">Render Template</router-link></md-list-item> --}}
</md-list>
</md-list-expand>
</md-list-item>
</md-list>
@endcomponent
@endsection
@section('content')
<router-view></router-view>
@endsection
@push('scripts')
<script src="{{ mix('js/app.js') }}"></script>
@endpush
<md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
<md-toolbar class="md-large app-logo">
<span class="md-title">{{ $title }}</span>
</md-toolbar>
{{ $slot }}
</md-sidenav>
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>{{ $icon }}</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">{{ $title }}</h2>
</md-toolbar>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Report Hero - @yield('title')</title>
<link rel="stylesheet" href="{{ mix('css/materialize.css') }}">
@yield('custom_css')
</head>
<body>
<div id="app" v-cloak>
@yield('mainNav')
@yield('sideNav')
@yield('content')
</div>
@stack('scripts')
</body>
</html>
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Auth::routes();
Route::get('/', 'HomeController@home');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment