Não exibe o conteúdo do componente

[Finalizado Pelo Aluno]

Aurélio Oliveira Criador 12/02/2019
Aurélio Oliveira

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.

Manager Carlos Ferreira 12/02/2019
Carlos Ferreira

Olá, Aurélio!
Tudo bem?

Define este component como default, assim:
Vue.component('users-component', require('./components/chat/Users')).default();

No aguardo.

Criador Aurélio Oliveira 13/02/2019
Aurélio Oliveira

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

Manager Carlos Ferreira 13/02/2019
Carlos Ferreira

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,
    }
});

Criador Aurélio Oliveira 15/02/2019
Aurélio Oliveira

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?

Manager Carlos Ferreira 15/02/2019
Carlos Ferreira

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.

Criador Aurélio Oliveira 14/03/2019
Aurélio Oliveira

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? 

Manager Carlos Ferreira 14/03/2019
Carlos Ferreira

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.

Criador Aurélio Oliveira 15/03/2019
Aurélio Oliveira

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.

 

Manager Carlos Ferreira 15/03/2019
Carlos Ferreira

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).

Criador Aurélio Oliveira 16/03/2019
Aurélio Oliveira

Ola Carlos, mais uma vez obrigado pela ajuda.

https://github.com/AurelioOliver/PortalTiSite

 

Manager Carlos Ferreira 18/03/2019
Carlos Ferreira

Assim deu certo (no arquivo app.js):
import ContagemComponent from './components/ContagemComponent';

const app = new Vue({
    el: '#app',
    components: {
        ContagemComponent,
    }
});

Criador Aurélio Oliveira 19/04/2019
Aurélio Oliveira

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.

Criador Aurélio Oliveira 19/04/2019
Aurélio Oliveira

Git: https://github.com/AurelioOliver/RealTime

 

Manager Carlos Ferreira 22/04/2019
Carlos Ferreira

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.

Criador Aurélio Oliveira 23/04/2019
Aurélio Oliveira

Obrigado Carlos, deu certo limpando o chache!

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!