Import js file in vuejs and Laravel template

Asked

Viewed 451 times

1

I am creating a simple application and need to import some specific js and css files on a given page but how do you do that? In my template (Login.Vue) I tried 

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

and

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

remembering that I am using Laravel to generate the application, so all the files are concentrated in Resources/Assets/, already the style files and other js files are in /public/Assets/.

How could I, in my vuejs template, import some file that is in the public folder?

vue.js laravel-5.5

1 answer

0


To import files .js in an archive .vue, I usually use the import (import syntax), goes below:

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

If js own a export, such as a export function, can be imported a function this way:

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

And in the archive nome-do-arquivo.js would be so:

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

That is, in my experience usually the file .js exports something that subsequently in a component .vue may import in your tag <script>. Note that nay need necessarily be a function to be exported, can be used export default or module.exports for objects.

Observing: I usually have two separate "applications", the front-end in Vuejs and the back-end in Laravel, different from your example that in the case I understood it is all in the same place. I haven’t had time to test it, but from what I understand and what I’ve researched, I think it will work. You can edit/correct if I’m wrong, I’m trying to help with what I know.

  • Yes, I am using everything in one place. I can’t imagine how I would run the two independent but exchanging information. I tried to do the way you suggested but there were no changes in the css and js of the page.

  • Too bad, if you wish, I can remove the answer. I don’t know how your project is currently, but usually I prefer the separation in case of SPA application, without the use of the Laravel Slide. Basically it is two separate projects, and the communication (most of it) is through the Laravel routes available in the Routes folder in the api.php file, where the request is made from Vuejs with Vue-Resource or Axios for this back-end route. Settings should also be done on your . env if I’m not mistaken located at the root of the project, as well as some Docker settings if using.

  • No, you can leave the answer. It already gives me a north to review my learning and try some tutorial that teaches to do this way. I believe that the project gets more organized by leaving backend in one location and frontend in another. By the way, when deploying the project on some host, such as Hostinger, hostgator and others, it would be the same thing to do for an application with only Windows?

Browser other questions tagged vue.js laravel-5.5

You are not signed in. Login or sign up in order to post.