Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

Prototyping Vuebnb, Your First Vue.js Project In this chapter, we will learn the basic features of Vue.js. We'll then put this knowledge into practice by building a prototype of the case-study project, Vuebnb. Topics this chapter covers: Installation and basic configuration of Vue.js Vue.js essential concepts, such as data binding, directives, watchers and lifecycle hooks How Vue's reactivity system works Project requirements for the case-study project Using Vue.js to add page content including dynamic text, lists, and a header image Building an image modal UI feature with Vue
Vuebnb prototype In this chapter, we'll be building a prototype of Vuebnb, the case-study project that runs for the duration of this book. The prototype will just be of the listing page, and by the end of the chapter will look like this:
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: Summary In this first chapter, we d
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 and 204:
Fonts Open Sans and Font Awesome ne
Page 205 and 206:
After building again, we'll now hav
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
show all

Full-Stack Vue.js 2 and Laravel 5

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?