How to add javascript files in Vuejs app?
I tried to build an app using VueJS and Laravel And InertialJS but nothing works as expected.
I added both scripts.js and plugins.js before ending body tag but none of template JavaScript functionality works. For example the dropdown on user avatar not working.
Thanks
Replies (14)
Boy I'm keeping my eye on this. Because we're using Vite everything is ES6 so I needed to just include the prebuilt JavaScript files because converting them all would have been a nightmare. I also am experiencing the same problem.
Hi,
Unfortunately, right now we do not support Vue + Laravel 9 with Vite.
Could you please describe your implementation in more detail?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
This is vite.config.js:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ["resources/sass/app.scss", "resources/js/app.js"],
refresh: true,
}),
vue(),
],
});and this app.js file:
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { InertiaProgress } from "@inertiajs/progress";
createInertiaApp({
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
});
InertiaProgress.init({showSpinner: true,});and app.blade.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite(["resources/sass/app.scss", "resources/js/app.js"])
<link rel="stylesheet" type="text/css" href="/css/plugins.css">
@inertiaHead
<style type="text/css">
#app {
height: 100%;
}
</style>
</head>
<body>
@inertia
<script src="/js/scripts.js"></script>
<script src="/js/plugins.js"></script>
</body>
</html>Everything works fine except template functionality.
Hi,
- I would suggest you try a bundled version of scripts and plugin files. These files can be bundled using our Webpack or Gulp configs. Check our docs for more info.
Gulp doc: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp
Webpack doc: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/webpack - Change the order of your js files since scripts.bundle.js use global variables defined in plugins.bundle.js you need to include the plugins.bundle.js before scripts.bundle.js.
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/scripts.bundle.js"></script> - Make sure that files were loaded correctly and do not throw any errors, check your browser console log for errors.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I use bundled version but renamed it and removed bundle from the name. I put scripts before plugins but still the same. and there's no error in the console. I'm sure VueJs won't let the functions to work but I don't know how to fix it.
Hi,
If both files are loaded then you need to verify that initialization functions are called correctly. For example in the file js/components/menu.js inside a function KTMenu.init put a console.log then rebuild assets and make sure that the init function was triggered.
If a function is triggered then the Menu items must be working.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I did everything right but still can't make it work. it is strange that there is no error on the console to debug. I did the same thing for html version and it works fine, when I use IneriaJs and VueJs it is not working.
If you want I can share the source code with you.
Hi,
Most likely your Vue part renders asynchronously, we are doing an initialization in our js files on the page load event if layout and page elements are not ready by the load event then components will not be initialized.
To fix this you can try to move initialization from our js files into your vue component mounted function.
Here is an example of how you can initialize KTMenu component.
<script>
export default {
components: {
...
},
mounted() {
this.$nextTick(() => {
KTMenu.init();
});
}
}
</script>Regards,
Lauris Stepanovs,
Keenthemes Support Team
I did what you said like this:
import { onMounted, nextTick } from "vue"
onMounted(() => {
nextTick(() => {
KTMenu.init();
});
})And it is kinda worked, The menu that has hover state works fine but menu with click state sometimes works.
Hi Arman,
Could you clarify at what point the menus stop working?
Do they work after a page change or page refresh?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes when I refresh the page but only menus with on click event.
Hi Arman,
It could be related to KTMenu.initHandlers(), which we call inside KTMenu.init();, function initHandlers() must be called once per page load, please make sure that this function isn't called a few times.
For reference, you can check our Vue version ts components, we have two separate function there bootstrap() and reinitialization(), we call bootstrap() on the first page load and then to initialize the component when a route is changed we call reinitialization().
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes I added KTMenu.initHandlers() to layout page and now it works fine.
Thank you very much for your great help.
Hi Arman,
Glad to hear that. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
