[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)
Aurélio Oliveira
Criador Aurélio Oliveira 12/02/2019

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

Olá, Aurélio!
Tudo bem?

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

No aguardo.

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

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

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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

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

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?

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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.

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

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? 

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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.

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

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.

 

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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

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

Ola Carlos, mais uma vez obrigado pela ajuda.

https://github.com/AurelioOliver/PortalTiSite

 

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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

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

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

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.

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

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

 

Aurélio Oliveira
Manager Carlos Ferreira 12/02/2019

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.

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

Obrigado Carlos, deu certo limpando o chache!

Aurélio Oliveira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!