Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

export default vs module.exports

Bom dia.

Estava fazendo alguns testes com Laravel 5.3 e Vue.js e percebi que o "export default" simplesmente nao funciona. Ai troquei para module.exports e funcionou.

Gostaria de saber dos possiveis motivos do export nao funcionar..

Estou fazendo o seguinte:

bootstrap.js

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

app.js

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));

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

HTML

<html>
<head></head>
<body>
    <div id="app">
        <example></example>
    </div>
<script src="/js/app.js"></script>
</body>
</html>

example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        <span>teste texto</span>
                        <h1>{{ teste }}</h1>                        
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // export default {
    module.exports = {
        mounted() {
            console.log('Component ready.')
        },
        data(){
          return{
            teste: 'jicjiciojijodc'
          }
        },        
    }

</script>
5 respostas
solução!

Olha, não sou do mundo PHP, mas tem um detalhe muito importante nesse código que você postou.

Todo código escrito em Vue que você postou esta usando CommonJS e não a sintaxe de módulos do ES6.

O Vue CLI que você usou no curso de Vue.js usa o sistema de módulos do ES6 por padrão e não CommonJS. Sendo assim, se você usou algum gerador de código do Laravel que cria um projeto em Vue, ele criou esse projeto usando CommonJS.

Não conheço muito de laravel, mas como o próprio Vue CLI não usa CommonJS, você não conseguirá usar a sintaxe que você aprendeu no curso e terá que usar a sintaxe CommonJS.

Agora, se o Vue CLI usa o padrão do ES6 e você esta usando CommonJS.. você não esta seguindo o padrão do Vue CLI, logo, do Vue.

    module.exports = {}

Isso é sintaxe de CommonJS.

export default

Isso é sintaxe de módulo do ES6.

Então, não vai funcionar nunca tentando usar uma sintaxe do ES6 para funcionar com um código que espera CommonJS.

Agora, porque seu código em laravel, gerado automático, talvez, usa CommonJS.. não faço a menor ideia, porque esse não é o padrão do Vue CLI. Você deve ter usando algum scaffold que fez assim. Mas como os caras do Laravel não são bobos, deve ter alguma opção para não usar CommonJS. Tem que pesquisar ai no mundo Laravel.

Outra coisa, se você olhar o arquivo main, vai perceber que usou a sintaxe do CommonJS, pois esta usando require para importar os módulos.

No Vue CLI, é usado import, porque essa é a instrução do ES6! Então, não é só o ponto que você colocou que é diferente, é o restante. Tem que ficar atento.

Droga, cliquei sem querer no botão que marca como solução.

Renato, pegou a ideia?

Perfeito Flavio. Peguei sim

Muito Obrigado !!!

Renato. Se o Laravel puder gerar o projeto com ES6 modules me da um toque depois.

Abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software