Problema ao rodar npm run watch - compila no VsCode, mas dá erro no Browser

Olá, Darcio!
Tudo bem?

Após você rodar estes comandos para corrigir os packages vulneráveis, o sistema continua funcionando normalmente?

---

Sobre os comandos amigo, não tem um padrão exato, porque note, quando você rodou "npm audit fix  e npm fund" o npm te passou o comando que precisava atualizar o package que tinha vunerabilidades:
npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps

O ponto é que esse comando pode mudar de aplicação para aplicação, e de período para período.

Boa noite Carlos, tudo bem sim e você como está ???

Então o sistema funciona sim a nível Laravel, menos o Vue a nível de tela que consequentemente não carrega o componente na parte superior a esquerda que é o Tópico abordado na aula ... E o Vue ferramenta que nós temos no Navegador não fica verde, sempre cinza como Vue. no detected ...

Daí alguns artigos já recomendaram fazer a troca de "Windows.vue = Vue" para import from Vue ... ou import from vue/dist/vue, mas aí nesse caso nem chega a compilar / rodar o npm run dev pelo VSCode, dá problema também, conforme imagem abaixo:

https://uploaddeimagens.com.br/imagens/IqUQS-g

Obrigado toda a atenção até aqui, abraço e grande semana ...

Na guia console do browser, tem algum erro?
Print por favor

---

Importa o Vue dessa forma:
import * as Vue from 'vue'

---

Sobre o VueDevTools, tem duas versões, sempre habilita um ou a outra, experimenta alternar entre elas.

Boa tarde Carlos, tudo bem ???

Quando esta assim, passa corretamente no VSCode e dá erro no Browser igual foto abaixo:

require('./bootstrap');

window.Vue = require('vue');

https://uploaddeimagens.com.br/imagens/sVGkAAs

___________________________________________________________________________

Agora que eu aditei essa linha nova que me passou:

require('./bootstrap');

import * as Vue from 'vue'

window.Vue = require('vue');

Ele dá dois erros conforme fotos abaixo uma no VSCode, outra no console do Browser:

https://uploaddeimagens.com.br/imagens/TcV0CQc

https://uploaddeimagens.com.br/imagens/Xz6mRIs

Observação importante, não sei se ajuda, antes quando tentei importar assim -> import Vue from 'vue' me retornava 2 warnings, do modo novo como me passou -> import * as Vue from 'vue' só me retorna 1 warning

https://uploaddeimagens.com.br/imagens/EZ68GKs

O browser é o mesmo erro -> https://uploaddeimagens.com.br/imagens/Xz6mRIs

Achei o problema amigo, você instalou o Vue 3:
https://github.com/darciofjunior/Notifications/blob/main/package.json#L22

Precisa instalar o Vue 2, exemplo:
https://github.com/especializati/curso-laravel-com-socket.io/blob/master/package.json#L27

Seta a dependência do Vue 2 manualmente, e roda o comando "npm update"

Usa esse projeto como base: https://github.com/especializati/curso-laravel-com-socket.io

Bom dia Carlos, tudo bem ???

Eu não iria imaginar nunca que isso aconteceu ... Jamais ...

Ainda hoje com tempo, vou fazer essa adaptação e te dou um retorno aqui no fórum ...

Uma só pergunta: Dá a entender que hoje por padrão o Vue 1 já era ok ??? Digo: seria possível instalar o vue 1 ou já não mais estaria defasado ??? Obs: não vou fazer isso, só estou perguntando mais a nível de conhecimento mesmo ...

Obrigado até o momento e toda a atenção de sempre ...

Boa tarde Carlos deixei com a versão 2.6 igual me disse, mas aí o mix não compila pelo VsCode vou mandar uma foto ...

https://uploaddeimagens.com.br/imagens/T6tRruo

Esse comando que eu rodava conforme sequência lá de cima 11) npm install vue@next ele faz compilar o mix, vamos dizer assim, mas é ele quem automaticamente já joga o vue para a versão 3 ...

Teria algum comando sei ser esse que faria rodar o mix e manteria na versão 2 sem dar esse erro ??? [webpack-cli] Error: Cannot find module 'vue/compiler-sfc'

Sim, este comando é para fazer o upgrade da versão do vue, para a 3
npm install vue@next

Faz o seguinte amigo, usa esse package.json aqui:
https://github.com/especializati/curso-laravel-notifications-gratuito/blob/master/package.json

Deleta o arquivo package-lock.json
Deleta o diretório node_modules/

E instala novamente:
npm install

Depois, atualiza as versões dos packages para evitar problemas de segurança.

Boa tarde Carlos, fazendo tudo o que me recomendou ... Tive o seguinte retorno:

https://uploaddeimagens.com.br/imagens/RoZryHc

Obrigado por todo o suporte até aqui ...

Um grande abraço

Boa tarde Carlos, essa seguinte sequência, resolveu pra mim e fica aí a dica pra quem for adaptar o Vue em qualquer projeto com Laravel:

1) composer require laravel/ui

2) php artisan ui vue

3) npm install

4) npm run dev

5) npm i vue-loader "Aqui preserva a versão 2.6.12 e não quebra" -> Comando correto

5.1) Se usar esse cara -> npm install vue@next -> aqui modifica para a versão 3 do vue.js ... "Não é indicado dependendo do projeto porque pode quebrar igual acontecia comigo"

6) npm run dev ou npm run watch

Obrigado todo o apoio / suporte, pode finalizar o ticket ...

Observação pra ninguém apanhar igual aconteceu comigo ... aaaarrrrrrghhhh rsrsrs, se quiser gerar com os links de Login para autenticação já que não temos mais o "php artisan make:auth", o tópico 2 se acrescenta --auth

1) composer require laravel/ui

2) php artisan ui vue --auth

3) npm install

4) npm run dev

5) npm i vue-loader "Aqui preserva a versão 2.6.12 e não quebra" -> Comando correto

5.1) Se usar esse cara -> npm install vue@next -> aqui modifica para a versão 3 do vue.js ... "Não é indicado dependendo do projeto porque pode quebrar igual acontecia comigo"

6) npm run dev ou npm run watch

Show de bola Darcio, meus parabéns amigo, e obrigado por compartilhar a solução.

Só para agregar aí a nível de resposta, recebi de um fórum essa resposta -> npm uninstall vue@next && npm install -D [email protected]

Mais um ponto ao tentar instalar o vuex vai dar erro e com esse comando vai dar certo -> npm install [email protected] -S