I have an error when migrating from Laravel mix to Laravel vite, I think the problem is in the app.js also I am using vue laravel sail WSL 2 and doock - vuejs3

Question

this is the error that shows when i run the npm run dev after deleting all the laravel mix plugin etc
failed to load config from /var/www/html/vite.config.js
error when starting dev server:
Error: Cannot find module 'laravel-vite-plugin'
Require stack:
- /var/www/html/vite.config.js
- /var/www/html/node_modules/vite/dist/node/chunks/dep-5e7f419b.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)
at Module._load (node:internal/modules/cjs/loader:885:27)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/var/www/html/vite.config.js:36:42)
at Module._compile (node:internal/modules/cjs/loader:1218:14)
at _require.extensions.<computed> [as .js] (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:62103:24)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
#[tag:error]
app.js with all required changed with inport + in my project there is not a bootstrap.js folder or a app.css file
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
import routes from './routes';
import axios from 'axios'
import VueAxios from 'vue-axios'
import Form from './utilities/Form';
import lodash from 'lodash';
import VueAutosuggest from "vue-autosuggest";
import BootstrapVue3 from 'bootstrap-vue-3'
import mitt from 'mitt';
import Vuetable from 'vue3-vuetable';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
import Toast, { POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";
import VueApexCharts from "vue3-apexcharts";
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const emitter = mitt();
export default router;
const app = Vue.createApp({});
app.config.performance = true;
import('./functions').functions(app);
app.config.globalProperties.emitter = emitter;
app.use(router);
app.use(VueAxios, axios);
app.use(VueAutosuggest);
app.use(lodash)
app.use(BootstrapVue3)
app.use(Vuetable)
app.use(Toast, {
position: POSITION.BOTTOM_RIGHT
});
app.use(VueApexCharts);
app.use(VueSweetalert2);
import lodash from 'lodash';
import axios from 'axios';
window.Form = Form;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//LOGIN COMPONENTS/PARTIALS//
app.component('login-header', require('./components/login-header').default);
app.component('fill-email', require('./components/Partials/fillEmail').default);
app.component('side-bar', require('./components/Partials/side-bar').default);
app.component('top-nav-bar', require('./components/Partials/top-nav-bar').default);
app.component('laravel-pagination', require('./components/Partials/laravel-pagination').default);
app.component('row-height', require('./components/Partials/row-height').default);
app.component('validation-errors', require('./components/Partials/validation-errors').default);`
file containing vite.config.js with plugin for vue and vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '#vitejs/plugin-react';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
// react(),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'#': '/resources/js'
}
}
});