- Page 3 and 4:
Full-Stack Vue.js 2 and Laravel 5 B
- Page 5 and 6:
Full-Stack Vue.js 2 and Laravel 5 C
- Page 7 and 8:
Acquisition Editor Siddharth Mandal
- Page 9 and 10:
About the Reviewer Ashley Menhennet
- Page 11 and 12:
Why subscribe? Fully searchable acr
- Page 13 and 14:
Table of Contents Preface What this
- Page 15 and 16:
Key Prices Show more feature Class
- Page 17 and 18:
5. Integrating Laravel and Vue.js w
- Page 19 and 20:
Changing carousel images Single-fil
- Page 21 and 22:
Finishing touches Summary 8. Managi
- Page 23 and 24:
Migration and seed Serving static a
- Page 25 and 26:
What this book covers Building a fu
- Page 27 and 28:
What you need for this book Before
- Page 29 and 30:
Development tools Downloading the p
- Page 31 and 32:
Vue Devtools The Vue Devtools brows
- Page 33 and 34:
Hardware You'll need a computer wit
- Page 35 and 36:
Conventions In this book, you will
- Page 37 and 38:
Customer support Now that you are t
- Page 39 and 40:
Errata Although we have taken every
- Page 41 and 42:
Questions If you have a problem wit
- Page 43 and 44:
Introducing Vue.js At the time of w
- Page 45 and 46:
Installation Although Vue can be us
- Page 47 and 48:
Directives Similar to Angular, we c
- Page 49 and 50:
Components Components extend basic
- Page 51 and 52:
Single-file components A drawback o
- Page 53 and 54:
Server-side rendering Server-side r
- Page 55 and 56:
Vue Devtools Vue Devtools is a brow
- Page 57 and 58:
Vue Router Vue Router allows you to
- Page 59 and 60:
Case-study project After a whirlwin
- Page 61 and 62:
Figure 1.3. Vuebnb home page Second
- Page 63 and 64:
Code base The case-study project ru
- Page 65 and 66:
Summary In this first chapter, we d
- Page 67 and 68:
Vuebnb prototype In this chapter, w
- Page 69 and 70:
Project code Before we begin, you'l
- Page 71 and 72:
Main files Open the vuebnb-prototyp
- Page 73 and 74:
Opening in the browser To view the
- Page 75 and 76:
Page content With our environment s
- Page 77 and 78:
Data binding A simple task for Vue
- Page 79 and 80:
Mock listing While we're developing
- Page 81 and 82:
Header image No room listing would
- Page 83 and 84:
Directives Vue's directives are spe
- Page 85 and 86:
Expressions If a directive requires
- Page 87 and 88:
Arguments Some directives take an a
- Page 89 and 90:
Figure 2.6. Page including header i
- Page 91 and 92:
List rendering The v-for directive
- Page 93 and 94:
.list .list-item { flex: 0 0 100%;
- Page 95 and 96:
Prices Let's now add the price list
- Page 97 and 98:
We'll also put a button after the p
- Page 99 and 100:
Event listener We now want to remov
- Page 101 and 102:
Getters and setters To assign a val
- Page 103 and 104:
Figure 2.9. Getters and setters Vue
- Page 105 and 106:
Image modal window To prevent our h
- Page 107 and 108:
Opening First, let's add a Boolean
- Page 109 and 110:
Window Let's now add markup for the
- Page 111 and 112:
Dimming the main window We could si
- Page 113 and 114:
Vue's mount element What if we just
- Page 115 and 116:
Closing Users will need a way to cl
- Page 117 and 118:
Event modifiers Vue makes it easy t
- Page 120 and 121:
Figure 2.11. Vue.js lifecycle diagr
- Page 122 and 123:
Proxied properties You may have not
- Page 124 and 125:
Summary In this chapter, we got fam
- Page 126 and 127:
Laravel Laravel is an open source M
- Page 128 and 129:
Environment We'll be using Laravel
- Page 130 and 131:
Vuebnb In Chapter 2, Prototyping Vu
- Page 132 and 133:
folders: - map: /Users/anthonygore/
- Page 134 and 135:
$ cp .env.example .env $ php artis
- Page 136 and 137:
Database We'll be using a relationa
- Page 138 and 139:
192.168.10.10 vuebnb.test The hosts
- Page 140 and 141:
Summary In this brief chapter, we d
- Page 142 and 143:
Vuebnb room listings In Chapter 2,
- Page 144 and 145:
Figure 4.1. Vuebnb web service Web
- Page 146 and 147:
Database Our web service will requi
- Page 149 and 150:
Schema A schema is a blueprint for
- Page 151 and 152:
Execution Now that we've set up our
- Page 153 and 154: Creating a seeder Laravel includes
- Page 155 and 156: Inserting the data In order to inse
- Page 157 and 158: +"price_extra_people": "No charge",
- Page 159 and 160: Eloquent ORM Object-Relational Mapp
- Page 161 and 162: Casting The data types in a MySQL d
- Page 163 and 164: Public interface The final piece of
- Page 165 and 166: Controller We'll be adding more rou
- Page 167 and 168: Accessing images Files in the publi
- Page 169 and 170: Image links The payload for each li
- Page 171 and 172: Integrating Laravel and Vue.js with
- Page 173 and 174: JavaScript JavaScript assets are ke
- Page 175 and 176: Node modules Another key aspect of
- Page 177 and 178: Asset compilation The files in reso
- Page 179 and 180: Dependencies In a frontend applicat
- Page 181 and 182: Bundling The process of resolving m
- Page 183 and 184: Laravel Mix One of the downsides of
- Page 185 and 186: $ webpack [options] Rather than fi
- Page 187 and 188: JavaScript Inspecting the output Ja
- Page 189 and 190: Fonts You might think it's strange
- Page 191 and 192: Removing unnecessary dependencies a
- Page 193 and 194: Syntax clash Using the prototype te
- Page 195 and 196: JavaScript Let's now move the proto
- Page 197 and 198: Displaying modules with Webpack Let
- Page 199 and 200: In short, import Vue from 'vue' is
- Page 201 and 202: CSS To migrate CSS, we'll copy styl
- Page 203: Fonts Open Sans and Font Awesome ne
- Page 207 and 208: Watch mode So far, we've been runni
- Page 209 and 210: Note that if you run BrowserSync in
- Page 211 and 212: Polyfills The ES2015 proposal inclu
- Page 213 and 214: Mock data We've now completely migr
- Page 215 and 216: 404.
- Page 217 and 218: Injecting data Getting the mock-lis
- Page 219 and 220: Figure 5.16. Model as a JSON string
- Page 221 and 222: Replacing the hard-coded model We n
- Page 223 and 224: Figure 5.19. How the listing model
- Page 225 and 226: Image URLs The last thing to do is
- Page 227 and 228: Figure 5.21. Images are now a data
- Page 229 and 230: Figure 5.22. Listing page with mock
- Page 231 and 232: Summary In this chapter, we got fam
- Page 233 and 234: Components When we're constructing
- Page 235 and 236: Data In addition to reusable markup
- Page 237 and 238: { images: [ '/images/1/Image_1.jpg'
- Page 239 and 240: Figure 6.3. Setting index to 2 sele
- Page 242 and 243: Composing with components Component
- Page 244 and 245: Registration scope While some compo
- Page 246 and 247: } @media (min-width: 744px) { .caro
- Page 248 and 249: Communicating with components A key
- Page 250 and 251: One-way data flow Since props must
- Page 252 and 253: Image URLs When we created ImageCar
- Page 254 and 255:
Distinguishing carousel controls Th
- Page 256:
Custom events Our carousel controls
- Page 259 and 260:
Figure 6.7. Screenshot showing a cu
- Page 261 and 262:
Single-file components Single-File
- Page 263 and 264:
Refactoring components to SFCs Our
- Page 265 and 266:
CSS SFCs allow us to add style to a
- Page 267 and 268:
CarouselControl Let's now abstract
- Page 269 and 270:
Slots We've learned so far that the
- Page 271 and 272:
Modal window A lot of the functiona
- Page 273 and 274:
Figure 6.13. Vue Devtools showing h
- Page 275 and 276:
estoring the modal opening function
- Page 277 and 278:
Once you've imported this component
- Page 279 and 280:
.list .title { flex: 1 1 25%; } .li
- Page 281 and 282:
Focusing now on the FeatureList com
- Page 283 and 284:
... ... About this listing @{{ a
- Page 285 and 286:
Virtual DOM Let's change tack now a
- Page 287 and 288:
Vue Loader Wouldn't it be great if
- Page 289 and 290:
:items="prices"> {{ price.title }}
- Page 291 and 292:
Vue.js builds There are a number of
- Page 293 and 294:
Module system The columns of the ta
- Page 295 and 296:
Full build vs runtime-only As we've
- Page 297 and 298:
Summary In this chapter, we saw how
- Page 299 and 300:
Single-page applications Most websi
- Page 301 and 302:
Vue Router Some frontend frameworks
- Page 303 and 304:
Vuebnb routing It was never a state
- Page 305 and 306:
Installing Vue Router Vue Router is
- Page 307 and 308:
App component For our router to wor
- Page 309 and 310:
Figure 7.3. /listing/1 with Vue Dev
- Page 311 and 312:
Let's also add name properties to o
- Page 313 and 314:
Home route Let's now add a server-s
- Page 315 and 316:
Initial state Just like our listing
- Page 317 and 318:
Refactoring Before we inject the in
- Page 319 and 320:
Home page initial state Using Eloqu
- Page 321 and 322:
Adding the thumbnail Each mock list
- Page 323 and 324:
Receiving in the client With the in
- Page 325 and 326:
ListingSummary component Now that t
- Page 327 and 328:
Figure 7.10. Prototype of ListingSu
- Page 329 and 330:
margin-right: 0; } Finally, we'll
- Page 331 and 332:
Figure 7.13. Empty home page after
- Page 333 and 334:
Adding a path to the model Let's go
- Page 335 and 336:
Route navigation guards Similar to
- Page 337 and 338:
HomePage component Let's add before
- Page 339 and 340:
...import axios from 'axios'; expor
- Page 341 and 342:
merging strategy are explained in t
- Page 343 and 344:
assignData You'll notice that withi
- Page 345 and 346:
Figure 7.15. Successful AJAX call a
- Page 347 and 348:
Scroll behavior Another aspect of w
- Page 349 and 350:
Figure 7.18. Custom footer on listi
- Page 351 and 352:
our custom-footer component. Let's
- Page 353 and 354:
Dynamically selecting the container
- Page 355 and 356:
Listing summary image slider On our
- Page 357 and 358:
Adding the slider We'll now add the
- Page 359 and 360:
Figure 7.21. Carousel controls on l
- Page 361 and 362:
Figure 7.22. Listing group shifted
- Page 363 and 364:
Carousel controls We now need the c
- Page 365 and 366:
Figure 7.24. Hidden left arrow on p
- Page 367 and 368:
Managing Your Application State wit
- Page 369 and 370:
Figure 8.1. The complexity of commu
- Page 371 and 372:
Principle #2 - Data is read-only Co
- Page 373 and 374:
Vuex Vuex (usually pronounced vewek
- Page 375 and 376:
Save feature As mentioned, we'll be
- Page 377 and 378:
} } .listing-summary { ... positi
- Page 379 and 380:
Saved state The ListingSave compone
- Page 381 and 382:
changed consistently. But there is
- Page 383 and 384:
haven't. Thanks to reactive Vuex da
- Page 385 and 386:
Adding to ListingPage We also want
- Page 387 and 388:
Making ListingSave a button As it i
- Page 389 and 390:
Moving page state into the store No
- Page 391 and 392:
Let's decouple our page state from
- Page 393 and 394:
Router The logic for retrieving pag
- Page 395 and 396:
export default { components: { ...
- Page 397 and 398:
Checking if page state is in the st
- Page 399 and 400:
Saved page We will now add the save
- Page 401 and 402:
Figure 8.16. Saved page If we remov
- Page 403 and 404:
cursor: pointer; } #toolbar ul li a
- Page 405 and 406:
Adding a User Login and API Authent
- Page 407 and 408:
Migration Looking first at the data
- Page 409 and 410:
array
- Page 411 and 412:
Let's now rerun our migrations and
- Page 413 and 414:
$ touch resources/assets/components
- Page 415 and 416:
Server routes Now that we've added
- Page 417 and 418:
Figure 9.3. Login page
- Page 419 and 420:
ut inside a single-file component t
- Page 421:
Adding authentication links to the
- Page 424 and 425:
Passing authentication state to the
- Page 426 and 427:
Figure 9.6. Value of auth in Vue De
- Page 428 and 429:
This is how the toolbar will look n
- Page 430 and 431:
Figure 9.8. Vuex tab of Vue Devtool
- Page 432 and 433:
Creating an API route We'll begin o
- Page 434 and 435:
Vuex actions In Chapter 8, Managing
- Page 436 and 437:
Figure 9.10. AJAX call results in a
- Page 438 and 439:
OAuth OAuth is an authorization pro
- Page 440 and 441:
Attaching tokens OAuth requires an
- Page 442 and 443:
Deploying a Full-Stack App to the C
- Page 444 and 445:
$ heroku login # Enter your Heroku
- Page 446 and 447:
Source code To deploy code to your
- Page 448 and 449:
Creating a database We need a datab
- Page 450 and 451:
$ heroku config:get CLEARDB_DATABAS
- Page 452 and 453:
Passport keys In Chapter 9, Adding
- Page 454 and 455:
Migration and seed Once the deploy
- Page 456 and 457:
Content distribution networks When
- Page 458 and 459:
Uploading files with FTP We will no
- Page 460 and 461:
FTP_SKIP_IMAGES=1 You can see how t
- Page 462 and 463:
** * Show production mode tip messa
- Page 464 and 465:
Reading from the CDN We now want Vu
- Page 466 and 467:
Setting the CDN URL The cdn helper
- Page 468 and 469:
Using the CDN in Vue In our Vue app
- Page 470 and 471:
Finale You have now completed the c
- Page 473 and 474:
Next steps You may have reached the