To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add images that only load when we see them. We also look at how to add input groups.

Lazy Loaded Images

Lazy loading images is more efficient since we don’t have to load all the images upfront.

To do that, we can use the b-image-lazy component.

For instance, we can write:

<template>
  <div id="app">
    <b-img-lazy src="http://placekitten.com/200/200" alt="kitten"></b-img-lazy>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Now our app will only load the image when it’s shown on the screen.

Input Groups

We can create input groups, which lets us group inputs with other components together.

To add an input group, we use the b-input-group component.

For instance, we can write:

<template>
  <div id="app">
    <b-input-group size="lg" prepend="$" append=".00">
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We change the size of the group to be large with size="lg" .

prepend lets us add something to the left the input.

append lets us add something to the right of the input.

So we should see the dollar sign on the left and .00 on the right. To customize the input group more, we can put code into slots.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <template v-slot:append>
        <b-input-group-text>
          <strong class="text-success">!</strong>
        </b-input-group-text>
      </template>
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

Then we can add an exclamation mark with that’s green on the right.

#technology #programming #software-development #javascript #web-development #vue