1

Estou criando uma aplicação simples e preciso importar alguns arquivos tanto js quanto css específicos em determinada página mas como se faz isso? No meu template (Login.vue) eu tentei

<script>
    require('./assets/js/pages/forms.js');
</script>

e

<script src="./assets/js/pages/forms.js"></script>

lembrando que estou usando laravel para gerar a aplicação, então, todos os arquivos estão concentrados em resources/assets/, já os arquivos de estilos e demais arquivos js estão em /public/assets/.

Como eu poderia, no meu template vuejs, importar algum ficheiro que se encontra na pasta public?

1 Resposta 1

0

Para importar arquivos .js em um arquivo .vue, eu costumo utilizar o import (import syntax), segue abaixo:

import forms from './assets/js/pages/forms'; // verifique se o diretório está correto

Se o js possuir um export, como por exemplo um export function, pode ser importado uma função desta forma:

import { nomeDaFuncao } from 'nome-do-arquivo';

E no arquivo nome-do-arquivo.js seria assim:

export function nomeDaFuncao () {
  // código
}

Ou seja, na minha experiência usualmente o arquivo .js exporta algo que posteriormente em um componente .vue poderá importar em sua tag <script>. Note que não precisa ser necessariamente uma função para ser exportada, pode se utilizar export default ou module.exports para objetos.

Observação: Usualmente possuo duas "aplicações" separadas, o front-end em Vuejs e o back-end em Laravel, diferente do seu exemplo que no caso pelo que entendi está tudo no mesmo local. Não tive tempo de testar, mas pelo que entendo e pesquisei creio que funcionará. Podem editar/corrigir caso eu esteja errado, estou tentando ajudar com o que sei.

3
  • Sim, estou usando tudo num local só. Nem imagino como faria para rodar os dois independentes mas trocando informações. Tentei fazer da maneira que vc sugeriu mas não houve mudanças no css e js da página.
    – Felipe Paz
    Commented 12/01/2018 às 2:17
  • Que pena, se desejar posso remover a resposta. Não sei como está seu projeto atualmente, mas geralmente prefiro a separação em caso de aplicação SPA, sem a utilização do blade do Laravel. Basicamente é dois projetos separados, e a comunicação (maioria dela) é através das rotas do Laravel disponibilizadas na pasta routes no arquivo api.php, onde a requisição é feita do Vuejs com o vue-resource ou axios para esta rota do back-end. As configurações devem ser feitas também em seu .env se não me engano localizado na raíz do projeto, bem como algumas configurações do docker caso esteja usando. Commented 12/01/2018 às 2:37
  • Não, pode deixar a resposta. Já me dá um norte de revisar meu aprendizado e tentar algum tutorial que ensine a fazer desta maneira. Acredito que o projeto fique mais organizado deixando backend em um local e frontend em outro. A propósito, na hora do deploy do projeto em algum host, como hostinger, hostgator e outros, seria a mesma coisa que fazer para uma aplicação apenas com laravel?
    – Felipe Paz
    Commented 12/01/2018 às 2:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .