Laravel 10x Vite not reloading

Hello,

I'm using Laravel 10.x with vue.js 3.2.x on my Ubuntu 22.x (not a sub-system) I'm trying to use vite to compile vuejs files, however the hot reload ain't working. THis is my vite.config.ts:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/js/src/main.ts"],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve("./resources/js/src"),
        },
    },
    optimizeDeps: {
        include: ["quill"],
    },
    server: {
        host: true,
        cors: true,
    }
});

When I do sail yarn dev I got this


  VITE v3.2.7  ready in 298 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.29.0.4:5173/

  LARAVEL v10.42.0  plugin v0.7.8

  ➜  APP_URL: localhost

If I change the vite.config.ts the vite reloads, but if there is any other change in any .vue file, nothing happens What am I missing here?

docker-compose.yml

...
laravel.test:
        build:
            context: ./docker/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '127.0.0.1:80:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
...

gych

2 years ago

Level 29

When you make a change to the main.ts file, does that trigger a reload?

resources/js/src/main.ts

Thavo

2 years ago

Level 2

@gych No, just in the vite.config.ts, when I change something in this file, its reload

gych

2 years ago

Level 29

@Thavo Can you share contents of your package.json file

Thavo

2 years ago

Level 2

@gych

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.5.1",
        "@fortawesome/free-solid-svg-icons": "^6.5.1",
        "@fortawesome/vue-fontawesome": "^3.0.5",
        "@vueuse/head": "^0.9.7",
        "axios": "^1.6.7",
        "pinia": "^2.0.22",
        "quill": "^1.3.7",
        "vue": "^3.2.37",
        "vue-height-collapsible": "^0.1.1",
        "vue-i18n": "^9.2.2",
        "vue-router": "^4.1.5",
        "vue3-perfect-scrollbar": "^1.6.0",
        "vue3-popper": "^1.5.0"
    },
    "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "^6.0.3",
        "@rollup/plugin-alias": "^3.1.9",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.7",
        "@types/node": "^20.11.16",
        "@vitejs/plugin-vue": "^3.1.0",
        "autoprefixer": "^10.4.12",
        "husky": "^8.0.3",
        "laravel-vite-plugin": "^0.7.2",
        "postcss": "^8.4.17",
        "sass": "^1.70.0",
        "tailwindcss": "^3.3.2",
        "typescript": "^4.6.4",
        "vite": "^3.1.0",
        "vue-tsc": "^0.40.4"
    }
}

gych

2 years ago

Level 29

@Thavo Just a question, to get a better idea of your current situation

When did this issue start happening? Is this an existing project that you moved to ubuntu and used to work fine on other os?

Thavo

2 years ago

Level 2

@gych I've bought a theme on themeforest Vristo theme, and it has Laravel + Vuejs configured, my main goal is to reuse the theme components and I'll do the API endpoints with the controllers, I'll have a SPA. I don't remember if it worked at the beginning, however I've tested some vite configs and none of them put the hot reload working. My main system is Ubuntu 22.x, I don't use windows.

gych

2 years ago

Level 29

@Thavo So the theme only contains front end, with no back end logic? Some of your packages use older version try to update these to the latest versions.

From what I see now you've installed laravel 10 and are trying to add the theme to this laravel project, right?

Thavo

2 years ago

Level 2

@gych You're right, the theme doesn't have any backend logic just the structure for the frontend. I just need to put this vite working with hot reload but I think I'll have to separate the backend and frontend.

gych

2 years ago

Level 29

@Thavo Yes your options are either to implement Inertia to connect the backend & frontend as one. Or like you say seperate front and backend, your front end will serve as SPA, your backend as the API that's connect with your frontend.

Personally if I was in your position I would install a fresh installation of Laravel 10 with the latest versions of vite, inertia, vue and tailwindcss. Then step by step migrate the theme to that new installation.

Do you already have experience in working with frontend vue SPA and Laravel as backend API or with Inertia ?

Please or to participate in this conversation.