Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Nihir's avatar
Level 50

How to implement Js

Hi everyone I have a query that I have to implement this theme in Vue js with laravel using the breeze package I implemented most of the code but then I got an issue that I can not use the template's js files if I want to use that js files how can I implement it in vue file like Footer? vue?

theme link:>https://kodesolution.com/html/2017/learnpro-html/demo/index-mp-layout1.html

Laravel Version:9.0

I want to use these js files.

<script src="js/custom.js"></script>

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  
      (Load Extensions only on Local File Systems! 
       The following part can be removed on Server for On-Demand Loading) -->
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/revolution-slider/js/extensions/revolution.extension.video.min.js"></script>

Please help me or give me any suggestions for it It would be helpful for me

0 likes
4 replies
jessicaoostveen's avatar

Just curious, why would you would like to have a WordPress slider in your Vue / Laravel theme when you can use other powerful library extensions? If I where you, I would rebuild the slider by myself with plain javascript or use another library. If I search quickly (not saying that this would be the best option) you could for example use an library like this one KeenSlider or something like that and tweak it with your needs. Hope this is useful. Good Luck! :)

Hzu's avatar

If you're looking to use a non-Vue template in Vue, it's better to stop now and find another template that is made specifically for Vue. It's not impossible but it will be very tedious and cause you a lot of headaches.

Anyway, if you're curious and still wanted to take the challenge, one way you could do this is by appending all of those scripts at the end of the body tag at runtime. The reason why is because Vue (like most SPAs) would render the page itself first before rendering the contents which will break your normal JS plugins (jQuery most likely, I assume).

If you add the JS script tags normally in the head or end of body tags (like a normal HTML/Blade file), they will not work properly since they usually look for contents that have already been rendered on the page (which is also the reason why those scripts are usually at the end of the body tag).

This should be very easy to do with Vue. There have been solutions for it out there on the Internet. Even a Vue plugin to do this exists. You should be able to find them if you want.

Lara_Love's avatar

Assuming that your problem is solved now. Due to the fact that you put the project on the host, the speed increases very slowly and you get negative SEO.

use bootstrap or tailwind

Nihir's avatar
Level 50

Hi guys, first of all, thank you for your response but I already implement half of the template in the vue there are some components like Slider, Photo Gallery, and Some Models I can not use it. I researched on the internet and got something that says for temporary solutions or small projects you can use the Master blade file which is okay for mid-size projects. I can easily manage js and CSS but now the main problem begins I solved the slider issue but for the categories image gallery and for the model I can not move further and the client's main requirements. So if you have any idea or have resource for the categories Image gallery for vue which one use bootstrap 3 or 3.3 or 4 then its acceptable for vue js template I have to make it dynamic so that.

Please or to participate in this conversation.