Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

ListingSave component Let's begin by creating the new component: $ touch resources/assets/components/ListingSave.vue The template of this component will include a Font Awesome heart icon. It will also include a click handler which will be used to toggle the saved state. Since this component will always be a child of a listing or listing summary, it will receive a listing ID as a prop. This prop will be used shortly to save the state in Vuex. resources/assets/components/ListingSave.vue: export default { props: [ 'id' ], methods: { toggleSaved() { // Implement this } } } .listing-save { position: absolute; top: 20px; right: 20px; cursor: pointer; } .listing-save .fa-heart-o { color: #ffffff; } Note that the click handler has a stop modifier. This modifier prevents the click event from bubbling up to ancestor elements, especially any anchor tags which might trigger a page change! We'll now add ListingSave to the ListingSummary component. Remember to pass the listing's ID as a prop. While we're at it, let's add a position: relative to the .listingsummary class rules so that ListingSave can be positioned absolutely against it. resources/assets/components/ListingSummary.vue: ... import ListingSave from './ListingSave.vue'; export default { ... components: { ListingSave
} } .listing-summary { ... position: relative; } ... @media (max-width: 400px) { .listing-summary .listing-save { left: 15px; right: auto; } } With that done, we will now see the ListingSave heart icon rendered on each summary:
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 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: Save feature As mentioned, we'll be
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

Create successful ePaper yourself

Delete template?

Save as template?