Skip to content

Commit a6c74bc

Browse files
LauraBigoniLauraBigoni
committed
inizialization Vue and imported the component
1 parent 43cb862 commit a6c74bc

File tree

8 files changed

+50110
-12783
lines changed

8 files changed

+50110
-12783
lines changed

‎public/js/app.js‎

Lines changed: 79 additions & 12670 deletions
Large diffs are not rendered by default.

‎public/js/front.js‎

Lines changed: 49916 additions & 0 deletions
Large diffs are not rendered by default.

‎public/mix-manifest.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"/js/app.js": "/js/app.js",
3-
"/css/app.css": "/css/app.css"
3+
"/css/app.css": "/css/app.css",
4+
"/js/front.js": "/js/front.js"
45
}

‎resources/js/app.js‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,4 @@
44
* building robust, powerful web applications using Vue and Laravel.
55
*/
66

7-
require('./bootstrap');
8-
9-
window.Vue = require('vue');
10-
11-
/**
12-
* The following block of code may be used to automatically register your
13-
* Vue components. It will recursively scan this directory for the Vue
14-
* components and automatically register them with their "basename".
15-
*
16-
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
17-
*/
18-
19-
// const files = require.context('./', true, /\.vue$/i)
20-
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
21-
22-
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
23-
24-
/**
25-
* Next, we will create a fresh Vue application instance and attach it to
26-
* the page. Then, you may begin adding components to this application
27-
* or customize the JavaScript scaffolding to fit your unique needs.
28-
*/
29-
30-
const app = new Vue({
31-
el: '#app',
32-
});
7+
require('./bootstrap');

‎resources/js/components/ExampleComponent.vue‎ renamed to ‎resources/js/components/App.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<div class="row justify-content-center">
44
<div class="col-md-8">
55
<div class="card">
6-
<div class="card-header">Example Component</div>
6+
<div class="card-header">Boolpress</div>
77

88
<div class="card-body">
9-
I'm an example component.
9+
<h1>Sito in costruzione</h1>
1010
</div>
1111
</div>
1212
</div>
@@ -15,6 +15,7 @@
1515
</template>
1616

1717
<script>
18+
name: 'App'
1819
export default {
1920
mounted() {
2021
console.log('Component mounted.')

‎resources/js/front.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* First we will load all of this project's JavaScript dependencies which
3+
* includes Vue and other libraries. It is a great starting point when
4+
* building robust, powerful web applications using Vue and Laravel.
5+
*/
6+
7+
require('./bootstrap');
8+
9+
window.Vue = require('vue');
10+
11+
import App from './components/App.vue';
12+
13+
const root = new Vue({
14+
el: '#root',
15+
render: h => h(App)
16+
});

‎resources/views/guest/home.blade.php‎

Lines changed: 92 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,106 @@
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/css2?family=Nunito:wght@200;600&display=swap" 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('/admin') }}">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
813

4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>Laravel</title>
9+
10+
<!-- Fonts -->
11+
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">
12+
13+
<!-- Styles -->
14+
<style>
15+
html,
16+
body {
17+
background-color: #fff;
18+
color: #636b6f;
19+
font-family: 'Nunito', sans-serif;
20+
font-weight: 200;
21+
height: 100vh;
22+
margin: 0;
23+
}
24+
25+
.full-height {
26+
height: 100vh;
27+
}
28+
29+
.flex-center {
30+
align-items: center;
31+
display: flex;
32+
justify-content: center;
33+
}
34+
35+
.position-ref {
36+
position: relative;
37+
}
38+
39+
.top-right {
40+
position: absolute;
41+
right: 10px;
42+
top: 18px;
43+
}
44+
45+
.content {
46+
text-align: center;
47+
}
48+
49+
.title {
50+
font-size: 84px;
51+
}
52+
53+
.links>a {
54+
color: #636b6f;
55+
padding: 0 25px;
56+
font-size: 13px;
57+
font-weight: 600;
58+
letter-spacing: .1rem;
59+
text-decoration: none;
60+
text-transform: uppercase;
61+
}
62+
63+
.m-b-md {
64+
margin-bottom: 30px;
65+
}
66+
67+
</style>
68+
69+
{{-- Importo Vue nel componente che usa #root --}}
70+
<script src="{{ asset('js/front.js') }}" defer></script>
71+
72+
{{-- Importo lo stile perchè per ora c'è solo bootstrap --}}
73+
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
74+
</head>
75+
76+
<body>
77+
<div class="flex-center position-ref full-height">
78+
@if (Route::has('login'))
79+
<div class="top-right links">
80+
@auth
81+
<a href="{{ url('/admin') }}">Home</a>
82+
@else
83+
<a href="{{ route('login') }}">Login</a>
84+
85+
@if (Route::has('register'))
86+
<a href="{{ route('register') }}">Register</a>
87+
@endif
88+
@endauth
89+
</div>
90+
@endif
91+
92+
<div id="root">
8293
<div class="content">
8394
<div class="title m-b-md">
84-
<div id="root">
85-
86-
</div>
8795
{{-- {{ env('APP_NAME') }} --}}
88-
<p>Sito in costruzione</p>
8996
</div>
90-
9197
<div class="links">
9298
{{-- <a href="#">Blog</a>
9399
<a href="#">Contacts</a> --}}
94100
</div>
95101
</div>
96102
</div>
97-
</body>
103+
</div>
104+
</body>
105+
98106
</html>

‎webpack.mix.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ const mix = require('laravel-mix');
1212
*/
1313

1414
mix.js('resources/js/app.js', 'public/js')
15+
.js('resources/js/front.js', 'public/js')
1516
.sass('resources/sass/app.scss', 'public/css')
1617
.options({ processCssUrls: false });

0 commit comments

Comments
 (0)