Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

Login system Now that we have our user model created, we can implement the rest of the login system. Again, Laravel includes this as an out-of-the-box feature, so there is only a small amount of configuration for us to do. Here's an overview of how the login system works: 1. The user provides their email and password in a login form. We'll create this form with Vue 2. The form is submitted to the /login POST route 3. The LoginController will then verify the user's credentials against the database 4. If the login is successful, the user is redirected to the home page. A session cookie is attached to the response, which is then passed to all outgoing requests to verify the user Here's a diagrammatic representation of the login system for further clarity: Figure 9.1. Login flow
$ touch resources/assets/components/LoginPage.vue We'll begin by defining the template markup, which includes a form with fields for email and password, and a submit button. The form uses the HTTP POST method and is sent to the /login path. I've wrapped the form elements in a div with the .form-controller class to help with styling. resources/assets/components/LoginPage.vue: Log in We don't need any JavaScript functionality just yet, so let's add our CSS rules now. resources/assets/components/LoginPage.vue: ... #login form { padding-top: 40px; } @media (min-width: 744px) { #login form { padding-top: 80px; } } #login .form-control { margin-bottom: 1em; } #login input[type=email], #login input[type=password], #login button, #login label { width: 100%; font-size: 19px !important; line-height: 24px; color: #484848; font-weight: 300; } #login input { background-color: transparent; padding: 11px; border: 1px solid #dbdbdb; border-radius: 2px; boxsizing:border-box } #login button { background-color: #4fc08d; color: #ffffff; cursor: pointer; border: #4fc08d; border-radius: 4px; padding-
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 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: Let's now rerun our migrations and
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?