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 Introduction

Full-Stack Vue.js 2 and Laravel 5

This is the code repository for Full-Stack Vue.js 2 and Laravel 5, published by Packt. It contains all the supporting project files necessary to work through the book from start to finish.

About the Book

Vue is a JavaScript framework that can be used for anything from simple data display to sophisticated front-end applications and Laravel is a PHP framework used for developing fast and secure web-sites. This book gives you practical knowledge of building modern full-stack web apps from scratch using Vue with a Laravel back end.

In this book, you will build a room-booking website named "Vuebnb". This project will show you the core features of Vue, Laravel and other state-of-the-art web development tools and techniques.

The book begins with a thorough introduction to Vue.js and its core concepts like data binding, directives and computed properties, with each concept being explained first, then put into practice in the case-study project.

You will then use Laravel to set up a web service and integrate the front end into a full-stack app. You will be shown a best-practice development workflow using tools like Webpack and Laravel Mix.

With the basics covered, you will learn how sophisticated UI features can be added using ES+ syntax and a component-based architecture. You will use Vue Router to make the app multi-page and Vuex to manage application state.

Finally, you will learn how to use Laravel Passport for authenticated AJAX requests between Vue and the API, completing the full-stack architecture. Vuebnb will then be prepared for production and deployed to a free Heroku cloud server.

Instructions and Navigation

All of the code is organized into folders. Each folder starts with a number followed by the application name. For example, Chapter02.

The code will look like the following:

<div id="app">
  <!--Vue has dominion within this node-->
</div>
<script>
  new Vue({
    el: '#app'
  });
</script>

Before you begin development on the case-study project, you must ensure that you have the correct software and hardware.

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

Contributors

Stargazers

Watchers

Forkers

nowa75 gaylabassham jamespoole athiwatp sithu05 widodopangestu rikuke gdembowski rubennp violacase gabrielgasnot jdmgarcia alexcw azholonov roisnewversion uglywillduckling coldmachine tavo1987 bkstar123 stevepop coolflame87 shrwdflrst emmanuelmezie catlynce watzki dergview lawrencemh yhbyun basit74 pvasin sandeshsays negarjf lanpalm123 yaserzizo oksanaiva bbathel12 easymomo mattierocks marcellushan ikashifullah mikihirpo jaguar19 escarter sailorsteve theoskye joemisika alitaufiqfajar ravijump24 actonsys jnmronquillo voidfire evianoa lawdoc71 mitsuru53 nhchon kimjaedinz paulop ramannada djbedford meeglos alldev0825 editurbide intoro zrko hassanjamal wadephillips s-gorman rob-kistner geoff-maddock basicwelth curvestech wrstudio-pl jenhacool jerryklimcik troyscott kerikh cmoney667 ajeetbpr zigcccc rinodung dark-sagittarius rinditriandi adrianmaenza awebcreative iamlili cedrick-vargas mdestafadilah michaelt372 mahirsust yzaguirre ttrezren ezaldeen rogong jcerdan olatundeadedeji jody-superminimal jay-aye-see-kay cangelozzi mantevito javaskater

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

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.

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

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.

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!

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

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

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)

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

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

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

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?

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

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

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.

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

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.

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

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

Full-Stack Vue.js 2 and Laravel 5

About the Book

Instructions and Navigation

Related Products

Download a free PDF

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

Contributors

Stargazers

Watchers

Forkers

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

Recommend Projects

Recommend Topics

Recommend Org