How to use BootstrapVue aspect component

An beginner-friendly introduction to using the aspect component

By: Ajdin Imsirovic 07 October 2020

If you are brand new to Vue, it would be useful to go through our Build your first Vue 2 app today tutorial first, in which we have set up Vue and VueBootstrap locally so that everything is ready for development.

Additionally, more specific to this tutorial, as a prerequisite, please have a look at our Prepping a brand new Vue app for BootstrapVue practice tutorial. The end of the linked tutorial is our starting point.

Let’s pick up where we left off in the above-referenced tutorial, and update our HelloWorld.vue file’s template, to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <b-form-group label="Aspect ratio" label-for="ratio" label-cols-md="auto" class="mb-3">
      <b-form-select id="ratio" v-model="aspect" :options="aspects"></b-form-select>
    </b-form-group>
    <b-card>
      <b-aspect :aspect="aspect">
        This will always be an aspect of "{{ aspect }}",
        except when the content is too tall.
      </b-aspect>
    </b-card>

  </div>
</template>

To avoid errors, we’ll also need to update the script element of our HelloWorld.vue template file:

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    data() {
      return {
        aspect: '16:9',
        aspects: [
          { text: '4:3 (SD)', value: '4:3' },
          { text: '1:1 (Square)', value: '1:1' },
          { text: '16:9 (HD)', value: '16:9' },
          { text: '1.85:1 (Widescreen)', value: '1.85:1' },
          { text: '2:1 (Univisium/Superscope)', value: '2:1' },
          { text: '21:9 (Anamorphic)', value: '21:9' },
          { text: '1.43:1 (IMAX)', value: '1.43:1' },
          { text: '3:2 (35mm Film)', value: '3:2' },
          { text: '3:1 (APS-P)', value: '3:1' },
          { text: '4/3 (Same as 4:3)', value: 4 / 3 },
          { text: '16/9 (Same as 16:9)', value: 16 / 9 },
          { text: '3 (Same as 3:1)', value: 3 },
          { text: '2 (Same as 2:1)', value: 2 },
          { text: '1.85 (Same as 1.85:1)', value: 1.85 },
          { text: '1.5', value: 1.5 },
          { text: '1 (Same as 1:1)', value: 1 },
        ]
      },
    },
  }
</script>

That’s all that we need to do to include the aspect component. It’s pretty cool how BootstrapVue is really a “plug-and-play” framework.

Feel free to check out my work here: