packtpublishing / full-stack-vue.js-2-and-laravel-5 Goto Github PK
View Code? Open in Web Editor NEWFull-Stack Vue.js 2 and Laravel 5, published by Packt
License: MIT License
Full-Stack Vue.js 2 and Laravel 5, published by Packt
License: MIT License
With only minimal changes to run in my environment, toggleSaved is hitting a hiccup. Can view saved listings but unable to change the state.
Not seeing where the problem is coming from, but just finishing this book.
Thanks for the excellent book!
VM64:1 POST https://test.test/api/user/toggle_saved 500 (Internal Server Error)
(anonymous) @ VM64:1
dispatchXhrRequest @ app.js:9524
xhrAdapter @ app.js:9358
dispatchRequest @ app.js:11654
Promise.then (async)
request @ app.js:11108
Axios.(anonymous function) @ app.js:11128
wrap @ app.js:9337
toggleSaved @ app.js:9661
wrappedActionHandler @ app.js:12583
dispatch @ app.js:12290
boundDispatch @ app.js:12184
toggleSaved @ app.js:15769
click @ app.js:15810
invokeWithErrorHandling @ app.js:2385
invoker @ app.js:2703
original._wrapper @ app.js:7325
08:27:19.917 app.js:9549 Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:9549)
at settle (app.js:11180)
at XMLHttpRequest.handleLoad (app.js:9423)
There was a similar issue, but it was closed.
I've done everything according to book, to say more I have even tried cloning this repository and started a new project using code provided in Chapter09.
When I log in, and click on 'add to favorites' button, I get
uncaught (in promise) Error: Request failed with status code 401
Adding the following to CSS the content of the page is crammed to the left of the screen when the modal opens, but why?
body.modal-open {
overflow: hidden;
position: fixed;
}
On page 207, the code,
routes: [
{ path: '/', component: HomePage, name: 'home' },
{ path: '/listing/:listing', component: ListingPage, name: 'listing' }
]
is meant to be be in resources/assets/js/router.js
and not resources/assets/js/app.js
In chapter 4, the book says there is a file 2017_06_20_133317_create_listings_table.php
in the database/migrations
. But there is no file w/ that name.
I am very new to Vue, which is why I bought this book. From what I can tell the following has errors in it and it does not reflect the source file it refers to. This is from page 31 of the PDF and it is the same in the online version at packtpub.com.
Vue has dominion over the element it mounts on and any child node. For our project so far,
Vue could manipulate the div with the header class, but it could not manipulate
the div with the toolbar ID. Anything placed within this latter div will be invisible to
Vue.
index.html:
<body>
<div id="toolbar">...</div>
<div id="app">
<!--Vue only has dominion here-->
<div class="header">...</header>
...
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
In this example code given the div that has a header class is closed with a </header>
tag, which doesn't make sense to me. It is also completely different from the actual code in the index.html file, which is the following:
<body>
<div id="toolbar">
<img class="icon" src="logo.png">
<h1>vuebnb</h1>
</div>
<div id="app">
<div class="container"></div>
</div>
<script src="app.js"></script>
</body>
There is no div with a class called header. The class is called container. I am confused enough. These typos don't help.
Page 88, it is stated for the example:
echo gettype($listing->amenity_wifi());
it should be:
echo gettype($listing->amenity_wifi);
For example:
$ php artisan tinker
>>> $listings = \App\Listing::all();
>>> foreach ($listings as $listing) {
echo $listing->address . '\n';
echo gettype($listing->amenity_wifi);
}
Dear,
On final chapter, after deploying, the website seemingly is working, but these issues
logo.png:1 GET https://vuebnbafapp.herokuapp.com/images/logo.png 404 (Not Found)
logo_grey.png:1 GET https://vuebnbafapp.herokuapp.com/images/logo_grey.png 404 (Not Found)
(https://vuebnbafapp.herokuapp.com/)
(https://vuebnbaf-b590.kxcdn.com/images/logo.png) is working.
app.blade.php
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vuebnb</title>
<link rel="stylesheet" href="{{ cdn('css/style.css') }}" type="text/css">
<link rel="stylesheet" href="{{ cdn('css/vue-style.css') }}" type="text/css">
<script type="text/javascript">
window.vuebnb_server_data = "{!! addslashes(json_encode($data)) !!}";
window.csrf_token = "{{ csrf_token() }}";
window.cdn_url = "{{ cdn('') }}";
</script>
</head>
<body>
<div id="app">
</div>
<script src="{{ cdn('js/app.js') }}"></script>
</body>
</html>
App.vue
<template>
<div>
<div id="toolbar">
<router-link :to="{ name: 'home' }">
<img class="icon" :src="logoUrl">
<h1>vuebnb</h1>
</router-link>
<ul class="links">
<li v-if="$store.state.auth">
<router-link :to="{ name: 'saved' }">Saved</router-link>
</li>
<li v-if="$store.state.auth">
<a @click="logout">Log Out</a>
<form style="display: hidden" action="/logout" method="post" id="logout">
<input type="hidden" name="_token" :value="csrf_token"/>
</form>
</li>
<li v-else>
<router-link :to="{ name: 'login' }">Log in</router-link>
</li>
</ul>
</div>
<router-view></router-view>
<custom-footer></custom-footer>
</div>
</template>
<script>
import CustomFooter from './CustomFooter.vue';
export default {
components: {
CustomFooter
},
data() {
return {
csrf_token: window.csrf_token
}
},
methods: {
logout() {
document.getElementById('logout').submit();
}
},
computed: {
logoUrl() {
return `${window.cdn_url || ''}images/logo.png`;
}
}
}
</script>
<style>...</style>
CustomFooter.vue
<template>
<div id="footer">
<div class="hr"></div>
<div :class="containerClass">
<p>
<img class="icon" :src="logoUrl">
<span>
<strong>Vuebnb</strong>. A full-stack Vue.js and Laravel demo app
</span>
</p>
</div>
</div>
</template>
<script>
export default {
computed: {
containerClass() {
//this.$route.name is either 'home' or 'listing'
return `${this.$route.name}-container`;
},
logoUrl() {
return `${window.cdn_url || ''}images/logo_grey.png`;
}
}
}
</script>
<style>...</style>
Could you help me.
The tutorial is based on using Homestead, but I'm using standard MAMP. Under MAMP the app gives blank screen, I've tried several things to resolve this, but still the WSOD is appearing. The problem seems to be in loading the Vue part (not loaded). I've implemented other Laravel apps with Vue and there was no problem. So very strange thing with this app. Could you give a hint for solving the problem? Thx
try the code with the explain, in the momenent to trigger event click to launch the modal obtain the next warning
[Vue warn]: Error in event handler for "header-clicked": "TypeError: Cannot set property 'modalOpen' of undefined"
found in
---> at resources/assets/components/HeaderImage.vue
I try change or send the property but I dont understand with this issue, thank for help me
Hi there,
I'm on chapter 5 and getting this error when run npm install (tried with sudo as well):
vagrant@homestead:~/projects/vuebnb$ npm install
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/dashdash/node_modules/assert-plus):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/projects/vuebnb/node_modules/fsevents/node_modules/dashdash/node_modules/assert-p
lus/package.json.1682293961'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/getpass/node_modules/assert-plus):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/projects/vuebnb/node_modules/fsevents/node_modules/getpass/node_modules/assert-pl
us/package.json.4177708995'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/sshpk/node_modules/assert-plus):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/projects/vuebnb/node_modules/fsevents/node_modules/sshpk/node_modules/assert-plus
/package.json.685348660'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/rc/node_modules/minimist):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/projects/vuebnb/node_modules/fsevents/node_modules/rc/node_modules/minimist/packa
ge.json.507977674'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/jsprim/node_modules/assert-plus):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/projects/vuebnb/node_modules/fsevents/node_modules/jsprim/node_modules/assert-plu
s/package.json.328223166'
npm ERR! path ../acorn/bin/acorn
npm ERR! code EPROTO
npm ERR! errno -71
npm ERR! syscall symlink
npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/home/vagrant/projects/vuebnb/node_modules/.bin/acorn'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/vagrant/.npm/_logs/2018-03-05T17_01_12_688Z-debug.log
$table->boolean('amenity_wifi')->default(false);
Does not work with Laravel 5.7,
Replaced that with
$table->boolean('amenity_wifi')->default(0);
and it worked fine.
Hello sir, I've been follow your book instruction, but I get stuck when install npm,
the error like this
I'm new using npm and webpack and other stuff like that, can you give me some advice? I have searching on google and also ask in stackoverflow but has no answer yet, still error like that. Thanks for your answer, sorry for my bad English, I'm on chapter 5 anyway
There should not be a </span>
in the function parameters!
document.addEventListener(</span>'keyup', function(evt) {
if (evt.keyCode === 27 && app.modalOpen) {
app.modalOpen = false;
}
});
Hi Anthony, I had a problem with chapter 09.
I went through all chapter in your books happily, but I got a problem with Authentication with Passport in chapter 9.
I always got error:
(POST) api/user/toggle_saved 401 (Unauthorized)
I checked carefully about your step-by-step in your book.
I tried to do a google search, but I couldn't solve this problem.
Finally, I need your support.
I hope you can spend your time to help me about this issue.
Thank you so much in advanced!
Hi
I'm reading the book.
In the chapter 2 "Prototyping Vuebnb, Your First Vue.js Project" and I notice that "open sans all" is not install
The command line "npm install open-sans-all" resolve the problem.
I'm trying to change the way amenities are displayed, based on their availability (the table's true or false value).
This value is not included once the populateAmenitiesAndPrices (in helpers.js) function returns the object.
So, what would be the best way to include this "status" value in the object?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.