Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

Full-Stack Vue.js 2 and Laravel 5 Bring the frontend and backend together with Vue, Vuex, and Laravel Anthony Gore
Page 4 and 5: BIRMINGHAM - MUMBAI
Page 6 and 7: Credits Author Anthony Gore Copy Ed
Page 8 and 9: About the Author Anthony Gore is a
Page 10 and 11: www.PacktPub.com For support files
Page 12 and 13: Customer Feedback Thanks for purcha
Page 14 and 15: Server-side rendering The Vue ecosy
Page 16 and 17: Shared folders Terminal commands En
Page 18 and 19: Watch mode BrowserSync ES2015 Polyf
Page 20 and 21: Vuebnb routing Installing Vue Route
Page 22 and 23: Server routes CSRF protection Post-
Page 24 and 25: Preface The year is 2014 and the wa
Page 26 and 27: powerful features of Vue.js. Chapte
Page 28 and 29: Operating system You can use a Wind
Page 30 and 31: Browser Vue requires ECMAScript 5,
Page 32 and 33: IDE You will, of course, need a tex
Page 34 and 35: Who this book is for This book is f
Page 36 and 37: Reader feedback Feedback from our r
Page 38 and 39: Downloading the example code You ca
Page 40 and 41: Piracy Piracy of copyrighted materi
Page 42 and 43: Hello Vue - An Introduction to Vue.
Page 44 and 45: Basic features Let's now do a high-
Page 46 and 47: Templates By default, Vue will use
Page 48 and 49: Reactivity A key feature of Vue's d
Page 50 and 51: Advanced features If you have been
Page 52 and 53:
Module build As we saw earlier, Vue
Page 54 and 55:
The Vue ecosystem While Vue is a st
Page 56 and 57:
Figure 1.1. Vue Devtools component
Page 58 and 59:
Vuex Vuex provides a powerful way t
Page 60 and 61:
Vuebnb Vuebnb is a realistic, full-
Page 62 and 63:
Figure 1.4. Vuebnb listing page
Page 64 and 65:
Folders The code base contains the
Page 66 and 67:
Prototyping Vuebnb, Your First Vue.
Page 68 and 69:
Figure 2.1. Vuebnb prototype Once w
Page 70 and 71:
NPM install You'll now need to inst
Page 72 and 73:
lock; } #toolbar h1 { color: #4fc08
Page 74 and 75:
Installing Vue.js Now it's time to
Page 76 and 77:
The Vue instance Looking at our app
Page 78 and 79:
order-top: 1px solid #dce0e0; } .ab
Page 80 and 81:
Figure 2.5. Page including mock-lis
Page 82 and 83:
Style binding To set a background i
Page 84 and 85:
Usage Just like normal HTML attribu
Page 86 and 87:
Example: v-if v-if will conditional
Page 88 and 89:
Style binding (continued) Coming ba
Page 90 and 91:
Lists section The next bit of conte
Page 92 and 93:
Icons The second property of our am
Page 94 and 95:
Key As you might expect, the DOM no
Page 96 and 97:
Show more feature We've run into a
Page 98 and 99:
Class binding How we'll approach th
Page 100 and 101:
Reactivity When we click the More b
Page 102 and 103:
Reactive data properties Another on
Page 104 and 105:
Hiding the More button Once the Abo
Page 106 and 107:
Figure 2.10. Header image modal Our
Page 108 and 109:
flow of the document. We remove it
Page 110 and 111:
Disabling the main window When the
Page 112 and 113:
Preventing body scroll We have a pr
Page 114 and 115:
Watchers So, how can we add/remove
Page 116 and 117:
Escape key Having a close button fo
Page 118:
Lifecycle hooks When your main scri
Page 121 and 122:
Methods The Vue configuration objec
Page 123 and 124:
Removing listener To avoid any memo
Page 125 and 126:
Setting Up a Laravel Development En
Page 127 and 128:
Laravel and Vue Laravel may seem li
Page 129 and 130:
Homestead Laravel Homestead is a vi
Page 131 and 132:
Project code If you haven't already
Page 133 and 134:
Terminal commands All further Termi
Page 135 and 136:
Composer install To complete the in
Page 137 and 138:
Serving the project The main Vuebnb
Page 139 and 140:
Accessing the project With all the
Page 141 and 142:
Building a Web Service with Laravel
Page 143 and 144:
Web service A web service is an app
Page 145 and 146:
Mock data The mock listing data is
Page 147:
Migration A migration is a special
Page 150 and 151:
not meant to provide any new functi
Page 152 and 153:
Seeding mock listings Now that we h
Page 154 and 155:
Loading the mock data Laravel provi
Page 156 and 157:
Executing the seeder To execute the
Page 158 and 159:
Listing model We've now successfull
Page 160 and 161:
51, Hanzhong Street, Wanhua Distric
Page 162 and 163:
} Now these attributes will have th
Page 164 and 165:
Figure 4.3. JSON response from Vueb
Page 166 and 167:
Images As stated at the beginning o
Page 168 and 169:
Figure 4.5. Mock listing image disp
Page 170 and 171:
Summary In this chapter, we built a
Page 172 and 173:
Laravel frontend We think of Larave
Page 174 and 175:
CSS If you haven't heard of Sass be
Page 176 and 177:
Views To serve the frontend app wit
Page 178 and 179:
Webpack Webpack is the default buil
Page 180 and 181:
Modules A solution to the dependenc
Page 182 and 183:
Loaders Part of what makes Webpack
Page 184 and 185:
Running Webpack Now that we have a
Page 186 and 187:
First build Let's now run the dev s
Page 188 and 189:
CSS We also have a CSS bundle file,
Page 190 and 191:
Migrating Vuebnb Now that we're fam
Page 192 and 193:
$ cp ../vuebnbprototype/index.html
Page 194 and 195:
Figure 5.7. Home route
Page 196 and 197:
Mock data dependency Let's copy the
Page 198 and 199:
Vue.js dependency Let's now import
Page 200 and 201:
Figure 5.11. Home route with JavaSc
Page 202 and 203:
Font styles We also have the Open S
Page 204 and 205:
Images We'll now migrate the images
Page 206 and 207:
Development tools We can utilize so
Page 208 and 209:
BrowserSync Another useful developm
Page 210 and 211:
ES2015 The js Mix method applies th
Page 212 and 213:
After this builds, refresh your pag
Page 214 and 215:
Routes Currently, the home route, t
Page 216 and 217:
Architecture Given that we can retr
Page 218 and 219:
JSON We'll now encode the entire mo
Page 220 and 221:
Sharing data between scripts We hav
Page 222 and 223:
Amenities and prices If you refresh
Page 224 and 225:
Figure 5.20. New model data in page
Page 226 and 227:
app/Http/Controllers/ListingControl
Page 228 and 229:
Replacing the hard-coded image URLs
Page 230 and 231:
Figure 5.23. Listing page with mock
Page 232 and 233:
Composing Widgets with Vue.js Compo
Page 234 and 235:
Registration There are many ways to
Page 236 and 237:
Image carousel Let's build a new fe
Page 238 and 239:
Changing images The point of a caro
Page 240:
Computed properties It's convenient
Page 243 and 244:
}); This renders as: Hi I'm comp
Page 245 and 246:
Carousel controls To allow a user t
Page 247 and 248:
Figure 6.4. Carousel controls added
Page 249 and 250:
Props We can send data to a compone
Page 251 and 252:
Dynamic props We can reactively bin
Page 253 and 254:
Figure 6.5. Image URLs are props se
Page 255 and 256:
Figure 6.6. Carousel control icons
Page 258 and 259:
Changing carousel images Returning
Page 260 and 261:
Figure 6.8. The state of the image
Page 262 and 263:
Transformation To use a single-file
Page 264 and 265:
@click="clicked">`, props: [ 'dir'
Page 266 and 267:
Figure 6.10. Inlined CSS in documen
Page 268 and 269:
Content distribution Imagine you're
Page 270 and 271:
It's important to note that con
Page 272 and 273:
Next we import ModalWindow in the e
Page 274 and 275:
Refs In its initial state, the moda
Page 276 and 277:
Header image Let's now abstract the
Page 278 and 279:
Feature lists Let's continue our pr
Page 280 and 281:
Scoped slots The FeatureList compon
Page 282 and 283:
Although this approach has just as
Page 284 and 285:
methods: { openModal() { this.$refs
Page 286 and 287:
Render functions Rather than supply
Page 288 and 289:
Refactoring the main template as si
Page 290 and 291:
Mounting the root-level component w
Page 292 and 293:
(production)
Page 294 and 295:
Production builds The rows of the t
Page 296 and 297:
Selecting a build A good build for
Page 298 and 299:
Building a Multi-Page App with Vue
Page 300 and 301:
Routers If you are going with an SP
Page 302 and 303:
Special components When you install
Page 304 and 305:
Figure 7.1. Front page of Vuebnb
Page 306 and 307:
Creating routes The most basic conf
Page 308 and 309:
App. This is so the toolbar is in t
Page 310 and 311:
Home page Let's start work on our h
Page 312 and 313:
Figure 7.5. Home page with Vue Devt
Page 314 and 315:
Figure 7.6. Page source of vuebnb.t
Page 316 and 317:
Figure 7.7. Completed home page, fo
Page 318 and 319:
} Finally, we'll need to update our
Page 320 and 321:
1 => [ ... ] ... 29 => [ ... ] ] ]
Page 322 and 323:
"thumb" => "..." ] 1 => [ ... ] ...
Page 324 and 325:
Figure 7.8. Vue Devtools showing th
Page 326 and 327:
Let's declare ListingSummary within
Page 328 and 329:
After you add that code, your listi
Page 330 and 331:
In-app navigation If we use the add
Page 332 and 333:
Figure 7.14. How a page decides wha
Page 334 and 335:
*/
Page 336 and 337:
next An important feature of naviga
Page 338 and 339:
Home API endpoint We'll now impleme
Page 340 and 341:
Mixins If you have any functionalit
Page 342 and 343:
Moving the solution to a mixin Let'
Page 344 and 345:
Linking to the listing page The abo
Page 346 and 347:
Figure 7.16. Dev Tools console show
Page 348 and 349:
Adding a footer To improve the desi
Page 350 and 351:
Figure 7.19. Custom footer on home
Page 352 and 353:
The route object The route object r
Page 354 and 355:
Figure 7.20. Custom footer on home
Page 356 and 357:
esources/assets/components/HomePage
Page 358 and 359:
.listing-summaries-wrapper { overfl
Page 360 and 361:
Translate In order to shift our lis
Page 362 and 363:
Figure 7.23. Shifted listing groups
Page 364 and 365:
Finishing touches There are two mor
Page 366 and 367:
Summary In this chapter, we learned
Page 368 and 369:
Flux application architecture Imagi
Page 370 and 371:
Principle #1 - Single source of tru
Page 372 and 373:
Principle #3 - Mutations are synchr
Page 374 and 375:
Installing Vuex Vuex is an NPM pack
Page 376 and 377:
ListingSave component Let's begin b
Page 378 and 379:
Figure 8.7. The ListingSave compone
Page 380 and 381:
Mutator method We created the stub
Page 382 and 383:
Changing the icon to reflect the st
Page 384 and 385:
Figure 8.9. The ListingSave icon wi
Page 386 and 387:
Figure 8.10. The listing save featu
Page 388 and 389:
Figure 8.11. The listing save featu
Page 390 and 391:
Figure 8.12: Saved page Implementin
Page 392 and 393:
State and mutator methods Let's add
Page 394 and 395:
Retrieving page state from Vuex Now
Page 396 and 397:
Getters Sometimes what we want to g
Page 398 and 399:
to.path !== serverData.path) { axio
Page 400 and 401:
esources/assets/components/SavedPag
Page 402 and 403:
Toolbar links The last thing we'll
Page 404 and 405:
Page 406 and 407:
User model In order to save listing
Page 408 and 409:
Model Let's now take a look now at
Page 410 and 411:
Seeder In a normal web app with a l
Page 412 and 413:
Login system Now that we have our u
Page 414 and 415:
top: 12px; padding-bottom: 12px; }
Page 416 and 417:
Controller { use AuthenticatesUsers
Page 418 and 419:
CSRF protection CSRF (cross-site re
Page 420 and 421:
Post-login redirection When a user
Page 423 and 424:
Protecting the saved route We can u
Page 425 and 426:
auth meta property We'll begin by a
Page 427 and 428:
Responding to authenticated state N
Page 429 and 430:
Retrieving saved items from the dat
Page 431 and 432:
Persisting saved listings The mecha
Page 433 and 434:
array_search($id, $saved); if ($key
Page 435 and 436:
AJAX request Let's now use AJAX to
Page 437 and 438:
API authentication We added the aut
Page 439 and 440:
Laravel Passport Laravel Passport i
Page 441 and 442:
Page 443 and 444:
Heroku Heroku is a cloud platform s
Page 445 and 446:
Creating an app Let's now create a
Page 447 and 448:
$ heroku config:set APP_KEY=base64:
Page 449 and 450:
Default string length At the time o
Page 451 and 452:
Configuring a web server Web server
Page 453 and 454:
Deployment We've done all the neces
Page 455 and 456:
Serving static assets Since our sta
Page 457 and 458:
KeyCDN There are many different CDN
Page 459 and 460:
FTP_HOST=ftp.keycdn.com FTP_USER=an
Page 461 and 462:
NPM scripts To make it easy to use
Page 463 and 464:
Running the FTP script The first ti
Page 465 and 466:
CDN helper Let's begin by creating
Page 467 and 468:
... ... ...
Page 469 and 470:
Deploying to Heroku With that done,
Page 471:
Recap We've come a long way in this
Page 474:
show all

Full-Stack Vue.js 2 and Laravel 5

Create successful ePaper yourself

Delete template?

Save as template?