Skip to content

Commit 2226de0

Browse files
FRFlorFRFlor
committed
Pre-work (part 1/3): Remove clutter
Laravel comes with an initial blade template ready to go (Welcome.blade.php), which has lots of elements to it (Head style tag, basic login routing, paragraphs of comments). This commit removes all unnecessary bits. The focus of this project is to show how to set up Vue-Typescript on Laravel. Therefore, the only thing I want the Welcome template to have is the instantiation of the ExampleComponent.vue that laravel brings with it. (On the next commit we'll make that possible)
1 parent fc18f5d commit 2226de0

File tree

4 files changed

+11
-160
lines changed

4 files changed

+11
-160
lines changed

‎resources/js/app.js

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,8 @@
1-
2-
/**
3-
* First we will load all of this project's JavaScript dependencies which
4-
* includes Vue and other libraries. It is a great starting point when
5-
* building robust, powerful web applications using Vue and Laravel.
6-
*/
7-
81
require('./bootstrap');
92

103
window.Vue = require('vue');
11-
12-
/**
13-
* The following block of code may be used to automatically register your
14-
* Vue components. It will recursively scan this directory for the Vue
15-
* components and automatically register them with their "basename".
16-
*
17-
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
18-
*/
19-
20-
// const files = require.context('./', true, /\.vue$/i);
21-
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
22-
234
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
245

25-
/**
26-
* Next, we will create a fresh Vue application instance and attach it to
27-
* the page. Then, you may begin adding components to this application
28-
* or customize the JavaScript scaffolding to fit your unique needs.
29-
*/
30-
31-
const app = new Vue({
6+
new Vue({
327
el: '#app'
338
});

‎resources/js/bootstrap.js

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,19 @@
1-
21
window._ = require('lodash');
32

4-
/**
5-
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
6-
* for JavaScript based Bootstrap features such as modals and tabs. This
7-
* code may be modified to fit the specific needs of your application.
8-
*/
9-
103
try {
114
window.Popper = require('popper.js').default;
125
window.$ = window.jQuery = require('jquery');
136

147
require('bootstrap');
158
} catch (e) {}
169

17-
/**
18-
* We'll load the axios HTTP library which allows us to easily issue requests
19-
* to our Laravel back-end. This library automatically handles sending the
20-
* CSRF token as a header based on the value of the "XSRF" token cookie.
21-
*/
22-
2310
window.axios = require('axios');
24-
2511
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
2612

27-
/**
28-
* Next we will register the CSRF Token as a common header with Axios so that
29-
* all outgoing HTTP requests automatically have it attached. This is just
30-
* a simple convenience so we don't have to attach every token manually.
31-
*/
32-
3313
let token = document.head.querySelector('meta[name="csrf-token"]');
3414

3515
if (token) {
3616
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
3717
} else {
3818
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
3919
}
40-
41-
/**
42-
* Echo exposes an expressive API for subscribing to channels and listening
43-
* for events that are broadcast by Laravel. Echo and event broadcasting
44-
* allows your team to easily build robust real-time web applications.
45-
*/
46-
47-
// import Echo from 'laravel-echo'
48-
49-
// window.Pusher = require('pusher-js');
50-
51-
// window.Echo = new Echo({
52-
// broadcaster: 'pusher',
53-
// key: process.env.MIX_PUSHER_APP_KEY,
54-
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
55-
// encrypted: true
56-
// });

‎resources/sass/app.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
// Fonts
32
@import url('https://fonts.googleapis.com/css?family=Nunito');
43

‎resources/views/welcome.blade.php

Lines changed: 10 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,13 @@
11
<!doctype html>
22
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
7-
<title>Laravel</title>
8-
9-
<!-- Fonts -->
10-
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
11-
12-
<!-- Styles -->
13-
<style>
14-
html, body {
15-
background-color: #fff;
16-
color: #636b6f;
17-
font-family: 'Nunito', sans-serif;
18-
font-weight: 200;
19-
height: 100vh;
20-
margin: 0;
21-
}
22-
23-
.full-height {
24-
height: 100vh;
25-
}
26-
27-
.flex-center {
28-
align-items: center;
29-
display: flex;
30-
justify-content: center;
31-
}
32-
33-
.position-ref {
34-
position: relative;
35-
}
36-
37-
.top-right {
38-
position: absolute;
39-
right: 10px;
40-
top: 18px;
41-
}
42-
43-
.content {
44-
text-align: center;
45-
}
46-
47-
.title {
48-
font-size: 84px;
49-
}
50-
51-
.links > a {
52-
color: #636b6f;
53-
padding: 0 25px;
54-
font-size: 13px;
55-
font-weight: 600;
56-
letter-spacing: .1rem;
57-
text-decoration: none;
58-
text-transform: uppercase;
59-
}
60-
61-
.m-b-md {
62-
margin-bottom: 30px;
63-
}
64-
</style>
65-
</head>
66-
<body>
67-
<div class="flex-center position-ref full-height">
68-
@if (Route::has('login'))
69-
<div class="top-right links">
70-
@auth
71-
<a href="{{ url('/home') }}">Home</a>
72-
@else
73-
<a href="{{ route('login') }}">Login</a>
74-
75-
@if (Route::has('register'))
76-
<a href="{{ route('register') }}">Register</a>
77-
@endif
78-
@endauth
79-
</div>
80-
@endif
81-
82-
<div class="content">
83-
<div class="title m-b-md">
84-
Laravel
85-
</div>
86-
87-
<div class="links">
88-
<a href="https://laravel.com/docs">Docs</a>
89-
<a href="https://laracasts.com">Laracasts</a>
90-
<a href="https://laravel-news.com">News</a>
91-
<a href="https://blog.laravel.com">Blog</a>
92-
<a href="https://nova.laravel.com">Nova</a>
93-
<a href="https://forge.laravel.com">Forge</a>
94-
<a href="https://github.com/laravel/laravel">GitHub</a>
95-
</div>
96-
</div>
97-
</div>
98-
</body>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Laravel</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
</div>
12+
</body>
9913
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy