Full-Stack Vue.js 2 and Laravel 5

Recommendations

Info

Home page Let's start work on our home page now. We'll first create a new component, HomePage: $ touch resources/assets/components/HomePage.vue For now, let's add placeholder markup to the component before we set it up properly. resources/assets/components/HomePage.vue: Vuebnb home page Be sure to import this component in the router file, and uncomment the route where it's used. resources/assets/js/router.js: .... import HomePage from '../components/HomePage.vue'; import ListingPage from '../components/ListingPage.vue'; export default new VueRouter({ mode: 'history', routes: [ { path: '/', component: HomePage }, { path: '/listing/:listing', component: ListingPage } ] }); You might be tempted to test this new route out by putting the URL http://vuebnb.test/ into your browser address bar. You'll find, though, that it results in a 404 error. Remember, we still haven't created a route for this on our server. Although Vue is managing routes from within the app, any address bar navigation requests must be served from Laravel. Let's now create a link to our home page in the toolbar by using the RouterLink component. This component is like an enhanced a tag. For example, if you give your routes a name property, you can simply use the to prop rather than having to supply an href. Vue will resolve this to the correct URL on render. resources/assets/components/App.vue: vuebnb
Let's also add name properties to our routes for this to work. resources/assets/js/app.js: routes: [ { path: '/', component: HomePage, name: 'home' }, { path: '/listing/:listing', component: ListingPage, name: 'listing' } ] We'll also have to modify our CSS now since we now have another tag wrapped around our logo. Modify the toolbar CSS rules to match those that follow. resources/assets/components/App.vue: ... #toolbar { border-bottom: 1px solid #e4e4e4; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } ... #toolbar a { display: flex; align-items: center; text-decoration: none; } Let's now open a listing page, such as /listing/1. If you inspect the DOM, you'll see that our toolbar now has a new a tag inside it with a correctly resolved link back to the home page: Figure 7.4. The toolbar is a link back to the home page via the RouterLink element If you click that link, you'll be taken to the home page! Remember, the page hasn't actually changed; Vue router simply swapped ListingPage for HomePage within RouterView, and also updated the browser URL via the history.pushState API:
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: Figure 7.3. /listing/1 with Vue Dev
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

Create successful ePaper yourself

Delete template?

Save as template?