Laravel + Vue app assets are not building using demo 8

I followed this documentation to create a fresh Laravel 9 and Vue 3 using demo 8 app: https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration

However, when running npm run dev, it only builds up until about 12%, and then it freezes. How do I resolve this?

I also tried the regular Metronic 8 Laravel app and that application builds its assets without a problem.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

Can someone please help me out with this?

Hi Plaisir,

Sorry for the delay with reply.

The loading takes a while, but it should proceed after some time.

But approaching from the doc is not the best in combining vue and laravel applications, you can check another approach in the article below:
https://techvblogs.com/blog/how-to-install-vue3-laravel

Also if you just want to use Vue reactivity you might not use a Vue router, in this case, you can just bundle separate components and then use them in your page views.

The loading litterally takes ages: I left my laptop open for 20 minutes and it was still stuck as 12%.

Well, the thing is that I started out with a Laravel 9 Metronic 8 application build. But after developing I realised that I would like to use Vue components inside blade files.

My follow up question would be: is there any tutorial or documentation for achieving that? The Metronic Laravel 9 application does not have the standard Laravel 9 app.js file and the build is completely different, so I have no idea where to call Vue's createApp() from.

As for the article, this article only works well when I have a base Laravel app, which the Metronic 8 template is not.

Hi,

Unfortunately, we do not have an official Metronic doc about Vue component usage in .blade files. It is a great idea and we will consider adding it in upcoming releases.

Below I listed some tutorials from the web:
https://vegibit.com/how-to-use-vuejs-with-laravel-blade/
https://blog.pusher.com/why-vuejs-laravel/

I'm still having this issue. Followed this tutorial and everything works fine up until the part where I have to build the client using npm run dev. Then it stays stuck at 14% for some reason.

I also tried to build the Vue app in a separate codebase using Yarn and that built went well. It only does not build when trying to import the Vue directories into the Laravel app. Any pointers?

Hi,

I prepared a post on how you can make Laravel 9 and Vue 3 integration.

You can find the post here:
https://devs.keenthemes.com/question/laravel-9-with-vite-vue-3-integration

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(