How to re-use Vue js methods from another blade view

Question

I'm using Vue with Laravel, following basically this structure:

So basically, I'm using a js file for each blade view. But now I need to find a way to re-use those js files for others blade views, and I don't know if it is possible with the structure I'm using.

Above is an example about what I'm trying to do. Basically, I have a javascript file with Vue methods that I could reuse. What I thought is: "Only add the el:'.reusable-class' to the <div> on the example.blade.php and add the <script src="js/reusable.js"></script> at the bottom and that's it! I've imported successfully their methods..." But doesn't work.

Other thing I've tried is to call the method just beetween javascript files. something like this:

 appExample = new Vue({
  ...
 methods:
    test(){
         appReusable.reusable();
    }

And the message I get is: appExample is not defined. I've read about it, about how to import another vue component, but it will change my project structure...

What should I do to successfully import and reuse methods from another vue file with my current project structure?

This is what Vue components are for. You build a component once, then you can import them into any vue instance. vuejs.org/v2/guide/components.html — dispake
– dispake, Commented Jan 24, 2020 at 23:23

LobsterBaz · Accepted Answer · 2020-01-24 23:42:51Z

2

The feature your are looking for is called a Vue Component.

See Laravel documentation for quick introduction: https://laravel.com/docs/6.x/frontend#writing-vue-components

If you used the default front-end scaffold in your Laravel project, you'll find an example Vue Component in the following folder: ressouces >> js >> components >> ExampleComponent.vue

answered Jan 24, 2020 at 23:42

LobsterBaz

2,08313 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonatan Lavado Over a year ago

Thanks for your answer. I tried doing it as the example tutorial but doesn't work. I get the require is not defined error. Does that mean I need to install laravel/ui?

LobsterBaz Over a year ago

Install the laravel/ui package and then generate the scaffold for Vue JS: composer require laravel/ui --dev php artisan ui vue You should then be able to use the example vue-component that comes with Laravel anywhere in your blade files just like if it was a custom HTML tag <example-component></example-component> Don't forget to recompile your assets every time you change your anything in your vue-component using npm run dev or npm run watch during active development.

Collectives™ on Stack Overflow

How to re-use Vue js methods from another blade view

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related