Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

Building a Multi-Page App with Vue Router In the last chapter, we learned about Vue.js components and converted Vuebnb to a component-based architecture. Now that we've done this, we can easily add new pages to our app using Vue Router. In this chapter, we'll create a home page for Vuebnb, including a gallery of clickable thumbnails that showcase the full set of mock listings. Topics covered in this chapter: An explanation of what router libraries are and why they are a critical part of single-page applications An overview of Vue Router and its main features Installation and basic configuration of Vue Router Using the RouterLink and RouterView special components to manage page navigation Setting up AJAX with Vue to retrieve data from the web service without a page refresh Using route navigation guards to retrieve data before a new page is loaded
Single-page applications Most websites are broken up into pages in order to make the information they contain easier to consume. Traditionally this is done with a server/client model, where each page must be loaded from the server with a different URL. To navigate to a new page, the browser must send a request to the URL of that page. The server will send the data back and the browser can unload the existing page and load the new one. For the average internet connection, this process will likely take a few seconds, during which the user must wait for the new page to load. By using a powerful frontend framework and an AJAX utility, a different model is possible: the browser can load an initial web page, but navigating to new pages will not require the browser to unload the page and load a new one. Instead, any data required for new pages can be loaded asynchronously with AJAX. From a user's perspective, such a website would appear to have pages just like any other, but from a technical perspective, this site really only has one page. Hence the name, Single-Page Application (SPA). The advantage of the Single-Page Application architecture is that it can create a more seamless experience for the user. Data for new pages must still be retrieved, and will therefore create some small disruption to the user's flow, but this disruption is minimized since the data retrieval can be done asynchronously and JavaScript can continue to run. Also, since SPA pages usually require less data due to the reuse of some page elements, page loading is quicker. The disadvantage of the SPA architecture is that it makes the client app bulkier due to the added functionality, so gains from speeding up page changes may be negated by the fact that the user must download a large app on the first page load. Also, handling routes adds complexity to the app as multiple states must be managed, URLs must be handled, and a lot of default browser functionality must be recreated in the app.
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: Summary In this chapter, we saw how
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?