Laravel 8 Jetstream Vue 3 File Download Example - FreeCodeBlog

Last updated: Jul 04, 2022

Are you using laravel 8 jetstream vue 3 to download a file? Yes. Well, want to make a file download system in laravel 8 with jetstream vue 3? Yes. Don't worry friends, in this tutorial I will explain all so that you can create a file download system for your laravel 8 vue 3 jetstream project. May be I will use web route, API route, controller, vue 3 file to make a file download example in laravel 8 jetstream. Want to source code for Laravel 8 jetstream vue 3 file download example tutorial? Yes. Well I will shared file download example tutorial source code on my GitHub project. So after reading jetstream file download tutorial you may see source code on my GitHub profile.


Laravel 8 Jetstream Vue 3 File Download Example
Laravel 8 Jetstream Vue 3 File Download Example


1. Laravel 8 Jetstream.

Wait a minute, have you installed laravel jetstream vue version to create an example of a file download? May be not. Listen friends, In this tutorial I will make a file download system using laravel 8 jetstream inertia vue. So it's very important to install jetstream vue 3 version in laravel 8. Don't know how to install jetstream vue 3 version in laravel 8? No. Okay don't worry, I have a install laravel jetstream user authentication first party package tutorial that will help you to install vue jetstream in laravel 8.


2. Laravel 8 Web Controller.

Let's make a file download controller. I hope you know about laravel 8 controller. You need to run make controller command to create laravel 8 web controller.


php artisan make:controller FileDownloadController


Now you need to use this created File Download Controller in web route. Don't forget to use File Download Controller on top of the web route.


use App\Http\Controllers\FileDownloadController;


You need to create a file download web route in laravel 8. File download route should be get route.


Route::get('/file-download', [FileDownloadController::class, 'filedownload']);


Now it's time to use jetstream Inertia in web File Download Controller.


use Inertia\Inertia;


Now it's time to return jetstream Inertia vue file from web File Download Controller.


public function filedownload()
 return Inertia::render('FileDownload');


3. Laravel 8 Api Controller.

Have you configured the web controller to make file download example? Yes. Okay now it's time to configuration laravel 8 API controller to make file download system using jetstream vue 3.


php artisan make:controller Api\FileDownloadController


Now you need to use laravel 8 created API controller in API route so that you can make file download API. Use it top of the API route.


use App\Http\Controllers\Api\FileDownloadController;


Now you need to make a file download API route in laravel 8. Actually you need to make File download get route.


Route::get('/file-download', [FileDownloadController::class, 'filedownload']);


Now it's time to use storage facades in API File Download Controller.


use Illuminate\Support\Facades\Storage;


Next you need to make a File Download method in API controller that you make before.


 public function filedownload(Request $request)
        if (Storage::disk('public')->exists('filedownload/'.$request->file)) {
            return Storage::download('public/filedownload/'.$request->file);
            return redirect()->back();


4. Jetstream Inertia Vue 3 File.

Have you completed the API and web configuration to download a file? Yes! Good. Now you need to make a vue file in pages folder.




Now use a button with download method in template section of “FileDownload.vue” file.


<button @click="download(file)">Download</button>


Next use a download method in script section of “FileDownload.vue” file.


                axios.get("/api/file-download?file=" + file, {responseType: 'blob'})
                .then(response => {
                   const url = window.URL.createObjectURL(new Blob([]));
                  const link = document.createElement('a');
                  link.href = url;
                  link.setAttribute('download', file);
                .catch(e => {


Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Laravel 8 Email Notification Send To User When User Email Verified

In this tutorial we can learn how we can send a email when a user verified her email. We need to send email because email verified success email im... Read More

Add Stripe Payment Method In Laravel 8 Ecommerce Website

Well, In this tutorial I will add stripe payment method in laravel 8 ecommerce website using laravel first party cashier package. you can receive m... Read More

Use Laravel Sanctum To Make Laravel Api Authentication For Users

In this tutorial I will use laravel sanctum package to make laravel api authentication for users. For spa authentication or laravel vue api authent... Read More

Laravel Ui Package Setup In Laravel 8 With Vue 3

Want to use vue 3 in laravel ui? Laravel ui is a first party user authentication package and you can easily use it with laravel 8 and vue 3. So let... Read More

Make Laravel User Authentication Using Laravel Ui In Laravel 8 With Vue 2

Install and use laravel ui package in laravel 8 with Vue 2 to make user authentication. Laravel UI is a new first-party package that extracts the U... Read More