Unable to Install #vitejs/plugin-vue inside Laravel project - laravel

Question

I created a fresh Laravel project. And to use Vue JS I tried installing this package,
#vitejs/plugin-vue
But this throws me a set of errors,
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #vitejs/plugin-vue#3.0.0
npm ERR! Found: vite#2.9.14
npm ERR! node_modules/vite
npm ERR! dev vite#"^2.9.11" from the root project
npm ERR! peer vite#"^2.9.9" from laravel-vite-plugin#0.4.0
npm ERR! node_modules/laravel-vite-plugin
npm ERR! dev laravel-vite-plugin#"^0.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite#"^3.0.0" from #vitejs/plugin-vue#3.0.0
npm ERR! node_modules/#vitejs/plugin-vue
npm ERR! #vitejs/plugin-vue#"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite#3.0.0
npm ERR! node_modules/vite
npm ERR! peer vite#"^3.0.0" from #vitejs/plugin-vue#3.0.0
npm ERR! node_modules/#vitejs/plugin-vue
npm ERR! #vitejs/plugin-vue#"^3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I followed these steps,
1.laravel new {proj_name}.
2. npm install vue#next.
3. npm install.
4. After that I created a vue file and imported into app.js (resources/js/app.js).
5. I went to the blade file and cleared all -> hit `!` for emmet snippet, created a div with id #app, and add
#vite('resources/js/app.js').
I throw an error saying install #vitejs/plugin-vue. But when I try to install that it throws me those errors.

Answer 1

npm install vue#next vue-loader#next
npm i #vitejs/plugin-vue#2.3.3
composer require innocenzi/laravel-vite:0.2.*
npm i -D vite vite-plugin-laravel
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import laravel from 'vite-plugin-laravel'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
})
]
})
maybe you need to change app.js
import {createApp} from 'vue/dist/vue.esm-bundler.js';
or for async component add defineAsyncComponent
import {createApp, defineAsyncComponent} from 'vue/dist/vue.esm-bundler.js';
#vite() leave blank

Answer 2

If someone else is facing this issue add it directly to your package.json and then run npm i:
"#vitejs/plugin-vue": "^3.0.1"