Laravel + Vue 3 (Vite, TypeScript) SPA Setup
Tags: javascript, vue, webdev, laravel
Published: 2023-01-09 08:39:47

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
```bash
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.
```bash
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`

```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`:
```json
{
    ...
    "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.


![yarn build in FrontEndApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kecnngf6xfc0gm5ctn2h.png)


## 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
<?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:
```bash
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.

```json
{   
    ...
    "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 💖💖

[![bmc-button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bba6vubecqqdf2dlthjn.png)](https://www.buymeacoffee.com/BroJenuel)