Laravel + Vue 3 (Vite, TypeScript) SPA Setup

In this tutorial I am going to show you how you can setup your own single page application using Laravel + Vue 3 using typescript and Vite.

This is a manual way to add PWA on your laravel projects. We will not use InertiaJS or others like it, and we will not use the mix. We are manually going to implement our own VueJS frontend.

STEP 1: Lets create our Laravel Project

composer create-project laravel/laravel laravel-vue-manual

STEP 2: Setup FrontEnd

Inside our laravel project let us run a command using yarn, and choose vue and typescript.

yarn create vite 

Set the Project name to: FrontEndApp
Choose: Vue
Choose: TypeScript

Then Go to our FrontEndApp directory and run yarn or yarn install to install dependencies.

Configure Vite

Lets configure our vite config in FrontEndApp\vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default ({ mode }) => {
    // check if development
    const isDevelopment = mode === "development";

    return defineConfig({
        server: {
            port: 3000,
        },
        build: {
            // the built files will be added here
            outDir: "./../public/app",
        },
        // also going to change base base on mode
        base: isDevelopment ? "/" : "/app/",
        plugins: [vue()],
    });
};

And then lets change the build script in FrontEndApp\package.json, so that every time we build it will replace the files in public/app:

{
    ...
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build --emptyOutDir",
        "preview": "vite preview"
    },
    ...
}

Now if we run yarn build in FrontEndApp, it should create a folder called app inside public folder in the root directory of our laravel project.

STEP 3: Setup Laravel Route

Let us setup our laravel route so that we can access that file we just created.

lets edit this file routes\web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/app/{any}', function () {
    $path = public_path('app/index.html');
    abort_unless(file_exists($path), 400, 'Page is not Found!');
    return file_get_contents($path);
})
    ->name('FrontEndApp');

So now, if we open http://127.0.0.1:8000/app in our browser, we can now see that our app is up.

STEP 4: Setup Scripts

We are going to add a dev package in our root project directory, and its called concurrently. We use this to run 2 or more commands at once.

to install:

yarn add -D concurrently

Next, for me I really like to work automatically so I don't want to rebuild every time I'm working with frontednapp, so what we will going to do is to add a new script in our package.json in root directory of our project.

{   
    ...
    "scripts": {
        ...
        "front:serve": "cd FrontEndApp && yarn dev",
        "front:build": "cd FrontEndApp && yarn build",
        "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"",
        "deploy": "yarn setup && yarn front:build && php artisan migrate"
    },
    ...
}

With this, running yarn serve will run both 127.0.0.1:8080 and localhost:3000. You can now work with both project.

Once your done working on your FrontEndApp, you can run yarn deploy to build our frontend.

Conclusion

I believe this is also one way you can add pwa on your laravel project so you can keep them in a single project.

With that in mind you can add routes in your FrontEndApp project, and also able to add state manager like PiniaJA, and more.

I hope you learn something in this article. Follow Me For Stuff!

---

Source Code is Here: https://github.com/BroJenuel-Box/laravel-vue-manual

---

Buy me coffee 😁😁😁 Thanks 💖💖