DEV Community

medilies
medilies

Posted on • Edited on

3

Create project with Laravel 10 and Vue 3

#laravel #vue

Start a new Laravel project:



laravel new laravel-vue-app --git
cd laravel-vue-app
Enter fullscreen mode Exit fullscreen mode

Install Vue:



npm i vue@next
npm i @vitejs/plugin-vue
Enter fullscreen mode Exit fullscreen mode

Edit vite.config.js:



import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./resources/js"),
        },
    },
    plugins: [
        laravel({
            input: "resources/js/main.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
Enter fullscreen mode Exit fullscreen mode

alias will allow us to import files referring to them from the root of /resources/js folder.

I like to rename resources\js\app.js to resources\js\main.js and this is what I put initially in it:



import "@/bootstrap";
import "../css/app.css";

import { createApp } from "vue";

import App from "@/App.vue";

createApp(App)
    .mount("#app");
Enter fullscreen mode Exit fullscreen mode

This is a bare-bone resources\js\App.vue



<template>
    <section class="flex flex-col h-screen bg-gray-900">
        foo
    </section>
</template>

<script setup>

</script>
Enter fullscreen mode Exit fullscreen mode

Now edit Laravel to serve the SPA.

The following route will serve the SPA for URL paths that do not start with /api:



<?php

use Illuminate\Support\Facades\Route;

Route::get('/{path}', fn () => view('app'))
    ->where('path', '(?!api).*');
Enter fullscreen mode Exit fullscreen mode

This is resources\views\app.blade.php. The SPA will be rendered inside of <div id="app"></div>.



<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

    @vite('resources/js/main.js')
</head>

<body class="antialiased">
    <div id="app"></div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Now you can serve your app.



php artisan serve
Enter fullscreen mode Exit fullscreen mode 


npm run dev
Enter fullscreen mode Exit fullscreen mode

Image description

profile
Postmark
 Promoted

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

profile
Pieces.app
 Promoted

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Read next

mikeyoung44 profile image

New AI Vision System Uses Perception Tokens to Better Understand Images Like Humans Do

Mike Young -

mikeyoung44 profile image

Revealed: How Language AI Skills Actually Grow - New Study Groups Tasks to Predict Improvements

Mike Young -

mikeyoung44 profile image

Small Changes in AI Training Can Create Widespread Deceptive Behavior, Study Shows

Mike Young -

mikeyoung44 profile image

Kitsune: New GPU System Speeds Up Machine Learning 2.4x Using Smart Data Flow Management

Mike Young -