I have a spring boot program that uses thymeleaf. The web page loads. But the web page cannot find my css files. I see the follow logged by spring boot. The web page is loaded with this url: http://localhost:9090/lotto/rawdataocc.
No mapping for GET /lotto/lotto.css
The CSS file is under resources/static directory
The thymleleaf template is under templates directory.
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Historical Lotto Number Occurances</title>
<link th:href="#{lotto.css}" rel="stylesheet" />
<!--
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
-->
</head>
<body>
<table id="customers" >
<tr>
<th>Lotto Number</th>
<th>Occurrence</th>
</tr>
<tr th:each="list: ${list}">
<td th:text="${list.lottoNumber}" />
<td th:text="${list.occurance}" />
</tr>
</table>
</body>
</html>
What you're missing is a single slash /.
Instead of:
<link th:href="#{lotto.css}" rel="stylesheet" />
... do:
<link th:href="#{/lotto.css}" rel="stylesheet" />
This will make your url context-relative instead of page-relative (link)
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I am using this to integrate google font Roboto in my thymeleaf pdf template.
But no effect is coming in pdf
<link th:href="#{http://fonts.googleapis.com/css?family=Roboto}" rel='stylesheet' type='text/css' />
<body style="width: 900px; margin: 0 auto; color: #111; line-height: normal; font-family: Roboto; font-size: 12px; box-sizing: border-box;font-style: italic;">
I need to create like this model in PDF :
In html works great like this :
But when i loaded to pdf(barryvdh dompdf) I got this result? i'don't know why some content changes his place
This my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
width: 100%;
}
table tr td{
text-align: left;
border:1px solid;
display: inline-block;
width: 45%;
height:150px;
margin-top: 2px;
}
</style>
</head>
<body>
<table>
<tr>
#foreach($colisenattent as $coli)
<td>
{{$coli->data}}
</td>
#endforeach
</tr>
</table>
</body>
</html>
The issue lied in your css, At first glance though it looks ok.
At first display: inline-block; this css breaks the dompdf code so you will end up in some dompdf error,
Dompdf\Exception
The row #1 could not be found, please file an issue in the tracker with the HTML code
So you need to remove that.
use vertical-align: top; instead.I have added my own styling as well to make it close to ideal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
width: 100%;
border-collapse: separate;
border-spacing: 5px 0px 1px 0px;
}
th, td{
text-align: left;
vertical-align: top;
border: 3px solid;
border-radius: 5px;
width: 45%;
height: 150px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</thead>
<tbody>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</tbody>
</table>
</body>
</html>
DEMO Image
The HTML is currently creating a single row with n columns. Do you instead want to create n/2 rows with two columns?
If so, try something like this:
<table>
#for($i = 0; $i < count($colisenattent); $i += 2)
<tr>
<td>
{{ $colisenattent[$i]->data }}
</td>
<td>
#if (isset($colisenattent[$i + 1]))
{{ $colisenattent[$i + 1]->data }}
#endif
</td>
</tr>
#endfor
</table>
I have a problem with my menu button.
It flows up and down while I change the size of my window. I didn't find the problem. But I know that it has something to do with my script file from the masonry. I have no clue where I could find this problem.
On this page you will see the problem. Also it has a strange animation which I don't like (bounce down in the beginning)
Thanks for help.
I hope this will help....
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Immo17 | Primos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="primos" />
<meta name="keywords" content="francisco nobrega, immo17, madeira, haus in madeira, houses madeira, madeira projects, arquitectura, architekten, architecture, immobilien" />
<meta name="author" content="Immo 17" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FREEHTML5.CO
Website: http://freehtml5.co/
Email: info#freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="http://www.immo17.com/css/style.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/animate.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/bootstrap.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/fresco.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/masonry.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/bootstrap.css.map" rel="stylesheet"/>
<link href="http://www.immo17.com/css/style.css.map" rel="stylesheet"/>
<link href="http://www.immo17.com/css/flexslider.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/projects.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/icomoon.css" rel="stylesheet"/>
<link rel="shortcut icon" href="fav.ico">
<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100|Raleway:100" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://www.immo17.com/js/fresco.js"></script>
<script src="http://www.immo17.com/js/main.js"></script>
<script src="http://www.immo17.com/js/jquery.flexslider-min.js"></script>
<script src="http://www.immo17.com/js/bootstrap.min.js"></script>
<script src="http://www.immo17.com/js/jquery.countTo.js"></script>
<script src="http://www.immo17.com/js/jquery.min.js"></script>
<script src="http://www.immo17.com/js/jquery_masonry_final.js"></script>
<script src="http://www.immo17.com/js/modernizr-2.6.2.min.js"></script>
<script src="http://www.immo17.com/js/jquery.easing.1.3.js"></script>
<script src="http://www.immo17.com/js/jquery.waypoints.min.js"></script>
<script src="http://www.immo17.com/js/respond.min.js"></script>
<script src="http://www.immo17.com/js/main_masonry.js"></script>
<!-- Modernizr JS -->
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- Lightbox -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/fresco.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="robots" content="noindex,nofollow" />
<script type="text/javascript">
function loadUrl(newLocation) {
window.location = newLocation;
}
</script>
<style type="text/css">
img {
max-width: 100%;
}
.container,
.container2,
.container3,
.container24 {
margin-right: auto;
margin-left: auto;
padding: 55px;
/* padding-left: 40px; */
/* padding-right: 40px; */
/* padding-bottom: 40px; */
background-color: white;
}
/*
.container:before, .container:after, .container24:before, .container24:after, .container2:before, .container2:after, .container3:before, .container3:after {
content: " ";
display: table;
}
.container:after, .container24:after, .container2:after, .container3:after, .container3:after {
clear: both;
}
*/
.container3 {
display: flex;
}
/*
#media (min-width: 1080px) {
.container3 {
float: left;
width: 50%;
width: calc(0% + 450px);
margin-left: 0px;
margin-top: 10px;
padding: 0px;
max-width: 100%;
}
.container4 {
float: right;
width: 50%;
width: calc(100% - 2px);
margin-left: 32px;
margin-top: 10px;
padding: 0;
max-width: 100%;
}
}
*/
#media (min-width: 1035px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 450px;
}
.textcontainer {
float: right;
max-width: 520px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1500px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 600px;
}
.textcontainer {
float: right;
max-width: 620px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1700px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 500px;
}
.textcontainer {
float: right;
max-width: 820px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1900px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 600px;
}
.textcontainer {
float: right;
max-width: 820px;
padding: 0px;
/* border: 3px solid blue; */
}
}
h2 {
font-size: 32px;
font-weight: 600;
color: #000;
}
p {
font-size: 20px;
color: #000;
}
/*
#media (min-width: 800px) {
.demonstrations-media_image_d {
width:400px;
margin: 0;
}
}
#media (min-width: 1500px) {
.demonstrations-media_image_d {
width:600px;
margin: 0;
}
}
*/
/*
#media (min-width: 1360px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
}
.textcontainer {
float: right;
max-width: 420px;
padding: 10px;
border: 3px solid blue;
}
}
*/
img.fr-content-element {
max-width: 100%;
}
.fr-stroke-color {
background: none;
}
.fr-window-skin-fresco .fr-content-background {
box-shadow: none;
}
.arrow {
position: fixed;
bottom: 30px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjguMzVweCIgaGVpZ2h0PSIzNi45MjRweCIgdmlld0JveD0iMCAtOC41NzQgMjguMzUgMzYuOTI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgLTguNTc0IDI4LjM1IDM2LjkyNCINCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJDQoJCQk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM5QjlEOUYiIHN0cm9rZS13aWR0aD0iMC42MTQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjE4LjI5MyIgeTE9IjI4LjM1IiB4Mj0iOS41NzkiIHkyPSIxOS42MzYiLz4NCgk8L2c+DQoJPGc+DQoJCQ0KCQkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOUI5RDlGIiBzdHJva2Utd2lkdGg9IjAuNjE0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIxOC4yOTMiIHkxPSIyOC4zNSIgeDI9IjI3LjAwOCIgeTI9IjE5LjYzNiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9Ig0KCQkJOS41NzksMTkuNjM2IDE4LjI5MywyOC4zNSAxOC4yOTMsNi41NDYgCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjcuMDA4LDE5LjYzNg0KCQkJYy0yLjkwNCwyLjkwNS01LjgxMSw1LjgxLTguNzE1LDguNzE0YzAtNC4zMTMsMC04LjYyOSwwLTEyLjk0MiIvPg0KCTwvZz4NCjwvZz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTguMjkzIiB5MT0iMjguMDUiIHgyPSIxOC4yOTMiIHkyPSItOS4zMDUiLz4NCjwvc3ZnPg0K);
background-size: contain;
}
/*
.fr-side-button-icon{
cursor: url(images/arrow_l.svg), pointer;
}
*/
.fr-side-previous {
cursor: url(images/Arrow/arrow-right-samplesL.svg), pointer;
}
.fr-side-next {
cursor: url(images/Arrow/arrow-right-samplesR.svg), pointer;
}
.fr-position-outside .fr-position-text {
text-shadow: none !important;
}
p.bold {
font: bold !important;
}
u {
text-decoration: none !important;
border-bottom: 0.5px solid grey !important;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav id="fh5co-main-nav" role="navigation">
<i></i>
<div class="js-fullheight fh5co-table">
<div class="fh5co-table-cell js-fullheight">
<ul>
<li><a id="menu" href="home.html">Home</a></li>
<li><a id="menu" href="verkauf.html">Verkauf</a></li>
<li><a id="menu" href="about.html">Team</a></li>
<li><a id="menu" href="contact.html">Kontakt</a></li>
</ul>
<p>
DE |
EN
</p>
</div>
</div>
</nav>
<!-- menubar -->
<div id="fh5co-page">
<header>
<div class="container2" style="padding-top: 40px;">
<div class="fh5co-navbar-brand">
<h1 class="text-left"><a class="fh5co-logo" href="home.html">Immo 17</a></h1>
<i></i>
</div>
<hr class="linesina">
</div>
</header>
</div>
<!-- Img Lightbox and Text floating solved-->
</div>
<div class="arrow">
</div>
<!-- Img Lightbox and Text -->
<div class="container2">
<div class="textcontainer " style="margin-bottom: 40px;">
<h2 class="small-caps" style="background-color: #fff;">Fajã da Ovelha - Primos</h2>
<p class="small-caps" style="background-color: #fff;">Wir verkaufen Land, bestehend aus zwei vereinigten Grundstücken mit wunderschöner Aussicht auf das Atlantische Meer. <br>Haben Sie hunger, jedoch keine Lust zum Kochen? <br>Dann haben Sie nur fünf Minuten weiter das schöne Restaurante o Principicio
und keine zwei Minuten entfernt ein wunderschönes Café.<br> Die Grundstücke sind in Fajã da Ovelha, Madeira, Caminho das Irinhas.<br> Hier finden Sie das schöne Gelände. <span style="font-size: 18px;">32°46'49.2"N 17°14'05.2"W</span>.<br> Die zwei Grundstücke können optional auch einzeln gekauft werden.</p>
<p>Grundstücksfläche: 703m<sup>2</sup> <span> (380m<sup>2</sup> | 323m<sup>2 </sup>)</span></p>
<p><b>Preis: 71'500 CHF</b><span style="font-size: 12px; padding-left: 7px;">65'000 Euro</span></p>
<p><b><u>Kontaktpersonen </u></b><br>Christina Lüscher <span style="font-size: 12px; padding-left: 13px;"> DE | EN | IT </span>
<br>Xavier Nóbrega <span style="font-size: 12px; padding-left: 30px;"> PT | EN </span></p>
</div>
<div class='demonstrations demonstrations-media animate-box'>
<a href='images/Primos/primos1_1.jpg' class='fresco zoom' data-fresco-group='example'>
<img src='images/Primos/primos1.jpg' alt='' class="demonstrations-media_image" style="margin-bottom: 55px; margin-top: 6px;}" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos2_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos2.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos3_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos3.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos4_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos4.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos6_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos6.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos7_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos7.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
</div>
<!-- load -->
<script src='js/jquery_masonry_final.js'></script>
<script type='text/javascript' src='js/main_masonry.js'></script>
<!-- lightbox -->
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/fresco.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
I've run npm run watch and received the message
This dependency was not found:
* in ./resources/assets/js/app.js
To install it, you can run: npm install --save
So I ran npm install --save but still get the same message.
From my understanding, I need npm run or npm run watch to load the Vue files in Laravel.
For example, in 'resources/assets/js/components/Example.vue' file, I made edits to it but when I load up 'resources/views/welcome.blade.php' file, which I have as follows, the update from Example.vue file does not load.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="app">
<example></example>
</div>
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
<script src='js/app.js'></script>
</body>
</html>
(I only added in the script src link and the div with the 'app' id and the 'example' component)
What must I do to load the changes made to the Example.vue file? After this, I need to create new components in Vue.js in Laravel as well for my application.
You need to run :
npm install
then :
npm run dev
Eventually I figured it out what happens. I don't know why exactly but I have got the answer:
You are trying to include a vue component in a non-layout page like welcome.blade.php. Try wrapping this single page in a layout and add your component, in this case <example></example>. Be sure you are linking to your app.js.
Updated:
This is what happens exactly: Answer.