nuxt-frontend/components/layout/Footer.vue

<template>
  <v-footer light padless>
    <v-card class="flex my-0">
      <v-card-title>
        <v-row>
          <v-col cols="12" sm="12" md="3">
            <v-list dense>
              <v-subheader>Productcatalogus</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="12" md="3">
            <v-list dense>
              <v-subheader>Diensten</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="12" md="3">
            <v-list dense>
              <v-subheader>CATEGORY</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="12" md="3">
            <v-list dense>
              <v-subheader>CATEGORY</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
        </v-row>
      </v-card-title>

      <v-card-text>
        <v-row no-gutters>
          <v-col cols="12" sm="3">
            <v-list dense>
              <v-subheader>CATEGORY</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="3">
            <v-list dense>
              <v-subheader>CATEGORY</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="3">
            <v-list dense>
              <v-subheader>CATEGORY</v-subheader>
              <v-list-item-group v-model="item" color="primary">
                <v-list-item v-for="(item, i) in items" :key="i">
                  <v-list-item-content>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-col>
          <v-col cols="12" sm="3" class="d-flex flex-column">
            <v-list dense>
              <v-subheader>Betalingsmethode</v-subheader>

              <v-row>
                <v-col
                  v-for="payment in payments"
                  :key="payment.name"
                  class="d-flex child-flex"
                  cols="2"
                >
                  <v-img
                    :src="require(`@/assets/img/${payment.filename}`)"
                    :lazy-src="require(`@/assets/img/${payment.filename}`)"
                    contain
                  >
                    <template v-slot:placeholder>
                      <v-row class="fill-height ma-0" align="center" justify="center">
                        <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                      </v-row>
                    </template>
                  </v-img>
                </v-col>
              </v-row>
            </v-list>

            <v-list dense>
              <v-subheader>Volg ons</v-subheader>
              <v-btn v-for="icon in icons" :key="icon" class="mx-2" light icon>
                <v-icon small>{{ 'mdi-' + icon }}</v-icon>
              </v-btn>
            </v-list>
          </v-col>
        </v-row>
      </v-card-text>

      <v-card-actions class="py-2 grey lighten-4">
        <span>© Buningh {{ new Date().getFullYear() }}</span>
        <v-spacer></v-spacer>
        <span>Alle vermelde prijzen zijn in euro's en inclusief BTW</span>
      </v-card-actions>
    </v-card>
  </v-footer>
</template>

<script>
import Newsletter from '~/components/Newsletter/Newsletter'
import Disclaimer from '~/components/Info/Disclaimer'
import Privacy from '~/components/Info/Privacy'
import Cookies from '~/components/Info/Cookies'

export default {
  components: {
    Newsletter,
    Disclaimer,
    Privacy,
    Cookies
  },
  data: () => ({
    item: 99,
    payments: [
      { name: 'Bancontact', filename: 'BC_logo_ORGNL_RGB.png' },
      { name: 'PayPal', filename: 'PayPal.png' },
      { name: 'Maestro', filename: 'MAES.png' },
      { name: 'IDeal', filename: 'iDeal.png' },
      { name: 'MasterCard', filename: 'MC.png' },
      { name: 'Visa', filename: 'Visa.png' }
    ],
    items: [
      { text: 'Real-Time' },
      { text: 'Audience' },
      { text: 'Conversions' },
      { text: 'Whatever' }
    ],
    icons: ['twitter', 'facebook', 'linkedin', 'instagram'],
    disclaimer: false,
    privacy: false,
    cookies: false
  })
}
</script>