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.
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:
go is complaining that meta-tags don't exist, when they do.
➜ go version
go version go1.14.15 linux/amd64
➜ curl "https://go.mis.vision/mis-utils?go-get=1"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>go.mis.vision/mis-utils</title>
<meta name="go-import" content="go.mis.vision/mis-utils ssh://git#ssh.dev.azure.com:v3/somewhere">
<meta name="go-source" content="go.mis.vision/mis-utils _ _ _">
<style>
* { font-family: sans-serif; }
body { margin-top: 0; }
.content { display: inline-block; }
code { display: block; font-family: monospace; font-size: 1em; background-color: #d5d5d5; padding: 1em; margin-bottom: 16px; }
ul { margin-top: 16px; margin-bottom: 16px; }
</style>
</head>
<body>
<div class="content">
<h2>go.mis.vision/mis-utils</h2>
<code>go get go.mis.vision/mis-utils</code>
<code>import "go.mis.vision/mis-utils"</code>
Home: https://godoc.org/go.mis.vision/mis-utils<br/>
Source: ssh://git#ssh.dev.azure.com:v3/somewhere<br/>
</div>
</body>
</html>
➜ go get go.mis.vision/mis-utils
go: go.mis.vision/mis-utils#v1.0.1: unrecognized import path "go.mis.vision/mis-utils": parse https://go.mis.vision/mis-utils?go-get=1: no go-import meta tags ()
What am I missing?
specify additional parameter for the repo in vanity config: "VCS": "git"
Turns out, vangen was producing an invalid go-import format.
It should be: go.mis.vision/mis-utils git ssh://git#ssh.dev.azure.com/v3/somewhere
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
What I've done so far
First of all I'm REALLY NEW at laravel. I'm watching a great tutorial on YouTube and following most of the instructions. I uploaded the project to my domain, because I wanted to try out how the database connections worked in a production environment and using MySql (the guy uses sqlite in the video).
Even though I managed to make the project work as its supposed to, when I open up the page, it doesn't look alright, the smaller the screen is, the worst it looks, you can move sideways (it's hideous, really).
It used to work fine
When I created a blank laravel project from hostinger, and I accesed it with my cellphone, for instance, it worked well, and by that I mean that the font that said "Laravel" had margins and everything looked centered and as one is supposed to see a bootstrapped page. After I created a project following the tutorial and uploaded it, the nightmare started.
Showing you the code
The base laravel project says "Laravel" where my project says "gastiGram" (It's commented as "¡¡¡HERE IS THE PROBLEM!!!"); maybe with the less letters it works well on mobile (of course I'm kidding, I must have messed up somewhere). This is the code, guys and gals, so maybe you can help me out. Thanks.
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gastiGram</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
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: 13px;
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">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS THE PROBLEM!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
As no one seemed to find an answer for me...
I tried what others said and my conclusion is that it wasn't a problem with bootstrap nor vue. I guess it was the fact that the classes content and title m-b-md didn't provide the desire responsiveness I expected from the text
<div class="content">
<div class="title m-b-md">
gastiGram <!-- ¡¡¡HERE IS WHERE THE PROBLEM WAS!!! -->
</div>
<div class="navbar-brand">
<div>
</div>
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
I'm willing to accept an answer that demonstrates that what I'm saying is wrong and I can apply other solution to my problem in this project.
Kamlesh Paul suggestions were useful to me... now I have a little bit of a better understanding on how laravel works; still it was insufficient since the font was collapsing sideways applying what he said would work, but didn't, so I just applied the style manually
<h1 style="font-size:20vw;">gastiGram</h1>
<link href="{{asset('css/app.css')}}" rel="stylesheet">
I solved the problem placing this code in head section of welcome.blade.php page.
at the moment i get in touch with laravel. i tried to create a page who scan qr codes.
i created a normal project with laravel (composer create-project laravel/laravel testqrinstascan) and tried to implement step by step instascan.
I wanna use this library instascan -> https://github.com/schmich/instascan
But i get everytime the error "Laden fehlgeschlagen für das mit der Quelle "http://localhost:8000/instascan.min.js"."
but the file is in the same directory
It means loading script with source .... not possible -> https://imgur.com/a/SKang
This is my welcome.blade.php------------------------------------------------------------------------
<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>
<script type="text/javascript" src="instascan.min.js"></script>
<!-- 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">
<div class="content">
<div class="links">
<video id="preview"></video>
Hello World
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</div>
</div>
</div>
</body>