changing the resource structure @vite blade directive throws Exception

I added a new laravel 12 project and I have this structure in the resources folder:

resources

-admin #the frontend for the admin
--js
--sass
--package.json
--vite.config.js

-store #the frontend for the store

-views
--admin
---app.blade.php

--store
---home.blade.php

The admin will be an SPA and the store...I don't know yet :)

The problem is with the admin when run the dev server using vite

Vite manifest not found at: /var/www/my-store/public/build/manifest.json

The app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    @vite(['resources/admin/sass/app.scss', 'resources/admin/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>

The router web.php

Route::get('/', function () {
    return view('store.home');
});

Route::get('/administration{any}', function () {
    return view('admin.app');
})->where('any', '^(?!api).*$');

The vite.config.js (<-- I think here is the problem... I am missing something.....)

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

export default defineConfig({
    root: 'resources/admin',
    build: {
        outDir: '../../public/admin',
    },
    plugins: [
        laravel({
            input: ['sass/app.scss', 'js/app.js'],
            publicDirectory: '../../public/admin',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],   
    resolve: {
        alias: {
            '@': '/js',
        }
    },
    server: {
        host: '0.0.0.0',
        hmr: {
            clientPort: 5173,
            host: 'localhost',
        },
        fs: {
            cachedChecks: false
        }
    }
});

Package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.1",
        "laravel-vite-plugin": "^1.1.1",
        "lodash": "^4.17.21",
        "sass": "^1.83.1",
        "sass-loader": "^16.0.4",
        "vite": "^6.0.7"
    },
    "dependencies": {
        "@coreui/coreui": "^5.2.0",        
        "axios": "^1.7.9",
        "bootstrap-icons": "^1.11.3",     
        "pinia": "^2.3.0",      
        "vue": "^3.5.13",        
        "vue-i18n": "^11.0.1",      
        "vue-router": "^4.5.0"     
    }
}

When running npm run dev

  VITE v6.3.5  ready in 214 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.24:5173/
  ➜  press h + enter to show help

  LARAVEL   plugin v1.2.0

  ➜  APP_URL: undefined

but when accesing the administration page, it throws that exception Illuminate\Foundation\ViteManifestNotFoundException

What else I need to do? Or what I did wrong in the vite.config.js ?

UPDATE

Still not able to run the dev server ... but now I was able to make the build npm run build, changing the resources/admin/vite.config.js

export default defineConfig({
    build: {
        outDir: '../../public/admin',
        emptyOutDir: true,
    },
    plugins: [
        laravel({
            buildDirectory: '../../public/admin', # <- this new line
            publicDirectory: '../../public/admin',
            input: ['./sass/app.scss', './js/app.js'], # <- add the ./
            refresh: true,
        }),
...

After building, in public -> admin we have the assets folder + manifest.json file.

In the resources/views/admin/app.blade.php I have updated the @Vite directive (https://laravel.com/docs/12.x/vite#advanced-customization)

{{
   Vite::useBuildDirectory('admin')->withEntryPoints(['resources/admin/sass/app.scss', 'resources/admin/js/app.js'])
}}

now the error for the manifest is gone, but there is another one:

Unable to locate file in Vite manifest: resources/admin/sass/app.scss.

It seems that it doesn't know where to look for the app.scss and app.js

Solution

In order to keep the structure that I want in resources folder, I have done like this:

In the views -> admin -> app.blade.php:

 {{ Vite::useBuildDirectory('admin')->withEntryPoints(['resources/admin/sass/app.scss', 'resources/admin/js/app.js']) }}

In the resources -> admin folder, I let it only the js + sass folders (the app itself) and in the root project I have added those two configs:

vite.admin.config.js
vite.store.config.js

vite.admin.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            buildDirectory: 'admin',
            input: ['resources/admin/sass/app.scss', 'resources/admin/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],    
    resolve: {
        alias: {
            '@': '/resources/admin/js',
        }
    },
    server: {
        host: '0.0.0.0',
        hmr: {
            clientPort: 5173,
            host: 'localhost',
        },
        fs: {
            cachedChecks: false
        }
    }
});

and in the package.json:

...
   "scripts": {
        "dev.store": "vite --config vite.store.config.js",
        "build.store": "vite build --config vite.store.config.js",
        "dev.admin": "vite --config vite.admin.config.js",
        "build.admin": "vite build --config vite.admin.config.js"
    },
...

and is working, the dev server and the build :)