[Vuejs]-What's the best way to handle repeated section's in nuxt js?

by

1👍

Put it in a component and make the img a slot:

<template>
    <div class="card flex-md-row mb-4 shadow-sm h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
            <strong class="d-inline-block mb-2 text-primary">World</strong>
            <h6 class="mb-0">
                <a class="text-dark" href="#">40 Percent of People Can’t Afford Basics</a>
            </h6>
            <div class="mb-1 text-muted small">Nov 12</div>
                <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <a class="btn btn-outline-primary btn-sm" role="button" href="http://www.jquery2dotnet.com/">Continue reading</a>
            </div>
            <slot name="image">
                <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/arch" style="width: 200px; height: 250px;">
            </slot>
        </div>
    </div>
<template>

Then you can use the component and pass an image to the image slot:

<cool-component>
  <template slot="image">
    <img src="whatever"/>
  </template>
</cool-component>

Or you can leave that slot blank in the component and it will default to the defined image.

👤Ohgodwhy

Leave a comment