Não exibe o conteúdo do componente
[Finalizado Pelo Aluno]
Segui passo a passo porém o conteudo não é exibido. Se eu utilizo o componente de exemplo funciona desde que eu não altere o conteúdo do compomente, caso alterado não exibe a alteração. Registrei o componete como oritentedo assim: Vue.component('users-component', require('./components/chat/Users'));
Tentei compilar novamente e também não funcionou. Outra tentativa foi iniciar outro projeto do zero e também não funcionou.
Olá, Aurélio!
Tudo bem?
Define este component como default, assim:
Vue.component('users-component', require('./components/chat/Users')).default();
No aguardo.
Bom dia Carlos,
continua sem exibir o conteúdo.
Vejo o erro no console:
app.js:48698 Uncaught TypeError: Vue.component(...).default is not a function
at Object../resources/js/app.js (app.js:48698)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:48894)
at __webpack_require__ (app.js:20)
at app.js:84
at app.js:87
Desculpas era .default, e não .default()
Mas, também pode importar o component assim:
import Users from './components/chat/Users'
E registre na instância do Vue.js:
const app = new Vue({
el: '#app',
components: {
Users,
}
});
Bom dia Carlos obrigado pela atenção.... fiz novamente tudo do zero e importei assim: Vue.component('users-component', require('./components/chat/Users').default); então deu tudo certo.
Reparei que minha estrutura de pastas esta assim: resouces/js/components... ou seja não tem a pasta assets como tem ai no seu projeto, tem algum problema ficar sem essa pasta?
Olá, Aurélio!
Que bom que deu certo amigo. \o/
A partir da versão 5.7 do Laravel o diretório assets/ foi removido. Mas, não se preocupe, isso não altera em nada o funcionamento do Vue.js dentro do Laravel.
Bom dia Carlos,
Continuando os estudos resolvi implementar o VueJs em uma aplicação que tenho. Para isso criei um component na pasta components com o nome de ContagemComponent.vue.
Em seguida fiz o registro no app.js assim:
Vue.component('contagem-component', require('./components/ContagemComponent.vue').default)
const app = new Vue({
el: '#app',
components:{
ContagemComponent,
}
});
e ao chamar esse component na view não monstra o conteudo do componente e tenho o erro no console:
app.js:37063 [Vue warn]: Unknown custom element: <contagem-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Outra questão é que o componente de exemplo é exibido normalmente, mas se eu altero o texto do componente de exemplo, o mesmo não é atualizado na view.
Qual é o jeito certo de fazer esse registro?
Olá, Aurélio!
Certo. Preciso fazer algumas perguntas para identificar onde está o erro e te ajudar a resolver, ok?
Primeiro, preciso ver o conteúdo do component ContagemComponent (pode postar aqui ou no GitHub: https://pastebin.com/).
Quando compilou os assets, gerou algum erro? Se sim, qual?
Na sua view, tem o id="app" em uma div que envolve todo o conteúdo?
No aguardo.
Bom dia Carlos,
Como estou iniciando criei o component de form bem simples só pra ver se esta dando certo, como na aula:
<template>
<div>
#Contador...
</div>
</template>
Sempre que salvo o component ou a app.js é compilado com sucesso "Laravel Mix Build successful"
So a o id="app" estou usando o layout padrão do lararel @extends('layouts.app') que já envolto pela div id="app" correto?
Só uma observação é a minha estrutura de pasta esta assim: resouces/js/components ou seja não tema a assets, mas já sei que isso não causa problemas.
Olá, Aurélio!
Deixando o componente simples como fez, e compilando pelo Mix, deu certo?
Sobe esse projeto para o GitHub, e me envia para que eu possa te ajudar (veja como subir apps Laravel para o GitHub: https://academy.especializati.com.br/aula/versionar-projeto-laravel-subir-github).
Ola Carlos, mais uma vez obrigado pela ajuda.
https://github.com/AurelioOliver/PortalTiSite
Assim deu certo (no arquivo app.js):
import ContagemComponent from './components/ContagemComponent';
const app = new Vue({
el: '#app',
components: {
ContagemComponent,
}
});
Bom dia Carlos,
Tive alguns problemas, mas estou voltando a estudar o Laravel com Vue Js. Então iniciei novamente o curso Real-Time Laravel com Vue.js.
Novamente estou com dificuldade exibir os componentes na view index. Já fiz de tudo seguindo as dicas acima mas não tive sucesso.
Pode dar uma olhada por favor e me dizer onde estou errando?
https://github.com/AurelioOliver/RealTime
Mais uma vez muito obrigado pela ajuda.
Git: https://github.com/AurelioOliver/RealTime
Olá, Aurélio!
Tudo bem?
Testei o seu projeto aqui e está tudo certo.
Primeiramente clonei o seu projeto:
git clone https://github.com/AurelioOliver/RealTime.git
Depois baixei as dependências do composer:
composer install
Depois baixei do npm:
npm install
Depois recompilei os assets (para analisar se tinha algum erro, porque aparentemente estava tudo ok):
npm run dev
Abri a rota /chat (removi o middleware auth dela para conseguir testar mais facilmente) e deu certo: http://prntscr.com/nfhve6
Talvez o seu esteja com cache...
Experimenta atualizar o NPM.
Obrigado Carlos, deu certo limpando o chache!
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!