Integrate VueJS in Laravel (Quick)

  • Laravel 8.48.2
  • PHP 8.0.7
  • Composer 2.1.3

Install Laravel

Make sure you have composer install on your machine, if not, go to the download page and install it.

Install Laravel by running the following command

composer create-project laravel/laravel {project_name} --prefer-dist

Serve it by running the following command

php artisan serve

Install Vue

Install vue and vue-template-compiler

npm install --save-dev vue vue-template-compiler

Install vue-loader to use Vue Single-File Components

npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps

Create a new directory named components in resources/js and create a new Vue component App.vue

    <div>{{ title }}</div>
export default {
    data() {
        return {
            title: "Laravel & Vue Js",

In welcome.blade.php replace with the following code

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel & Vue JS</title>
    <body class="antialiased">
        <div id="app">
        <script src="/js/app.js"></script>

In command line run npm run watch
Open browser at localhost:8000 you will see the title of the data in App.vue component.

Source Code


TypeORM Generate New Migration From Entity

NextJS Github Page

Github Page with NextJS