Today we will see how to force download files in vuejs using Axios. In many websites we have seen these type of feature, we click on a text or block and particular file get downloaded in our system, so let’s see how it works.

Design Download File Layout

In the above image, we can see multiple images are there, on click of the separate card the image will get downloaded. Note one thing I am using vuetify here you can use bootstrap-vue or other. Let’s see the code first,

<template>
  <v-container grid-list-xl>
    <v-layout justify-center wrap>
      <v-flex xs12 md8>
        <v-card raised>
          <v-card-title class="blue white--text">Download Files</v-card-title>
          <br />
          <v-container py-0>
            <v-layout wrap>
              <v-flex v-for="(filesrc, index) in filesrcs" :key="index" xs12 md4>
                <v-card @click="downloadWithAxios(filesrc.src, filesrc.title)">
                  <v-list>
                    <v-list-item>
                      <v-list-item-title>{{ filesrc.title }}</v-list-item-title>
                      <v-list-item-icon>
                        <v-icon class="primary--text">mdi-download</v-icon>
                      </v-list-item-icon>
                    </v-list-item>
                  </v-list>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

#vuejs #javascript #vue #javascript-tips #axios