Unable to Install @vitejs/plugin-vue inside Laravel project

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/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^2.9.11" from the root project
npm ERR!   peer vite@"^2.9.9" from [email protected]
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/[email protected]
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: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @vitejs/[email protected]
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.

current · Accepted Answer · 2022-07-15 15:03:39Z

5

npm install vue@next vue-loader@next
npm i @vitejs/[email protected]
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

edited Jul 15, 2022 at 15:03

answered Jul 15, 2022 at 14:55

current

1864 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mishen Thakshana Over a year ago

I just installed npm i @vitejs/[email protected] and it worked thanks

Lionel Guaregua · Accepted Answer · 2022-09-21 21:59:41Z

4

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"

answered Sep 21, 2022 at 21:59

Lionel Guaregua

411 bronze badge

Collectives™ on Stack Overflow

Unable to Install @vitejs/plugin-vue inside Laravel project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related