Laravel and Vue.js are a powerhouse duo for modern web development. Combining Laravel’s robust backend capabilities with Vue.js’s reactive front end, you can create engaging, dynamic web applications. In this blog post, we’ll walk through creating an application that allows users to load PDFs into a viewable format right in the browser.
Prerequisites
Before diving in, ensure you have the following installed:
- PHP (>=7.3)
- Composer
- Node.js and npm
- Laravel CLI
Step 1: Setting Up Laravel and Vue.js
Install Laravel
First, create a new Laravel project:
bash
composer create-project --prefer-dist laravel/laravel pdf-app
cd pdf-app
Install Vue.js
Next, install Vue.js:
bash
npm install vue
npm install vue-loader vue-template-compiler
Configure Webpack
Add Vue.js support in webpack.mix.js:
js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
Create app.js in resources/js:
js
import { createApp } from 'vue';
import App from './components/App.vue';
createApp(App).mount('#app');
Step 2: Creating the Vue Component for PDF Viewing
Install PDF.js
PDF.js is a powerful library for rendering PDFs in a browser. Install it using npm:
bash
npm install pdfjs-dist
Create the Vue Component
Create App.vue in resources/js/components:
vue
<template>
<div>
<input type="file" @change="loadPdf" />
<canvas ref="pdfCanvas"></canvas>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist';
export default {
methods: {
loadPdf(event) {
const file = event.target.files[0];
if (file.type !== 'application/pdf') return;
const reader = new FileReader();
reader.onload = async (e) => {
const pdfData = new Uint8Array(e.target.result);
const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = this.$refs.pdfCanvas;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
};
reader.readAsArrayBuffer(file);
}
}
};
</script>
Step 3: Blade Template and Routes
Update Blade Template
Create welcome.blade.php in resources/views:
html
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Set Up Route
Add the following to routes/web.php:
php
Route::get('/', function () {
return view('welcome');
});
Step 4: Compile Assets and Run the App
Compile Assets
Use the following command to compile the assets:
bash
npm run dev
Run the Laravel Server
Finally, start the Laravel development server:
bash
php artisan serve
Open your browser and navigate to http://127.0.0.1:8000. You should see the file input and PDF viewer which is to use.
Conclusion
With these steps, you have a fully functional Laravel Vue.js application that can load and display PDFs. This is just the beginning—feel free to expand and customize your application further!