Full-Stack Vue.js 2 and Laravel 5

{ images: [ '/images/1/Image_1.jpg', '/images/1/Image_2.jpg',
'/images/1/Image_3.jpg', '/images/1/Image_4.jpg' ] } } }); var app = new Vue({
... });
Before we test this component, let's make an adjustment to our CSS. We
previously had a rule to ensure the image inside the modal window stretched to
full width by using the .modal-content img selector. Let's instead use the .imagecarousel
selector for this rule, as we're decoupling the image from the modal
window.
resources/assets/css/style.css: .image-carousel img { width: 100%; }
After your code has rebuilt, navigate the browser to /listing/1 and you should see
no difference, as the component should render in almost exactly the same way as
the previous markup did.
If we check Vue Devtools, however, and open up to the Components tab, you'll
see that we now have the ImageCarousel component nested below the Root instance.
Selecting ImageCarousel, we can even inspect its state:
Figure 6.2. Vue Devtools showing ImageCarousel component