Full-Stack Vue.js 2 and Laravel 5, published by Packt

License: MIT License

JavaScript 0.52% HTML 0.33% CSS 0.44% PHP 84.55% Vue 11.92% Shell 0.59% Blade 1.64% Procfile 0.01%

full-stack-vue.js-2-and-laravel-5's Issues

Chapter 10 demo, works great except toggleSaved

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)

Chapter 9 AJAX authorisation is not working

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

body content is crammed to the left of the screen in chapter2:watchers

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;
}

Chapter 7 - Building a Multi-Page App with Vue Router

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

Book and source code not in sync for data migrations

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.

Typos in Chapter 2

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 / typo amenity_wifi

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);
}

Chapter 10: logo and logo_grey

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.

Blank screen under MAMP

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

HeaderComponent call open modal

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

Chapter5 error npm install

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

Chapter 4 - Migrations.

$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.

Error when npm install

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

Typo in chapter2:event modifiers

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;
}
});

Chapter 09 Passport API Auth problem

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!

Font Open Sans All is not install

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.

Adding amenities value

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?

packtpublishing / full-stack-vue.js-2-and-laravel-5 Goto Github PK

full-stack-vue.js-2-and-laravel-5's Issues

Recommend Projects

Recommend Topics

Recommend Org